Javascript 如何在一个较大的函数下压缩和调用for循环或if语句中的每个函数？ .pretty{颜色：粉红色；} 功能展示苹果（bakedGood） { $（“#applepie_off，.apple_description”）.show（）； $（“#applepie_on”）.hide（）； } 功能隐藏包（bakedGood） { $（“#applepie_off，.apple_description”）.hide（）； $（“#applepie_on”）.show（）； } 功能展示香蕉（bakedGood） { $（“#banana_off，.banana_description”）.show（）； $（“#香蕉上”）.hide（）； } 功能hideBanana（bakedGood） { $（“#banana_off，.banana_description”）.hide（）； $（“#香蕉上”）.show（）； } 功能展示胡萝卜（烘焙食品） { $（“#carrot_off，.carrot_description”）.show（）； $（“胡萝卜”）.hide（）； } 功能隐藏箭头（bakedGood） { $（“#carrot_off，.carrot_description”）.hide（）； $（“#胡萝卜上”）.show（）； } 函数showCookie（bakedGood） { $（“#cookie_off，.cookie_description”）.show（）； $（“#cookie_on”）.hide（）； } 功能hideCookie（bakedGood） { $（“#cookie_off，.cookie_description”）.hide（）； $（“#cookie_on”）.show（）； } 函数更改样式表（样式名） { $（“#style_replace”）.attr（“href”，“css/”+styleName+”.css”）； } $（函数（） { $（“.contract、.apple\u description、.banana\u description、.carrot\u description、.cookie\u description”）.hide（）； });_Javascript_Jquery

Javascript 如何在一个较大的函数下压缩和调用for循环或if语句中的每个函数？ .pretty{颜色：粉红色；} 功能展示苹果（bakedGood） { $（“#applepie_off，.apple_description”）.show（）； $（“#applepie_on”）.hide（）； } 功能隐藏包（bakedGood） { $（“#applepie_off，.apple_description”）.hide（）； $（“#applepie_on”）.show（）； } 功能展示香蕉（bakedGood） { $（“#banana_off，.banana_description”）.show（）； $（“#香蕉上”）.hide（）； } 功能hideBanana（bakedGood） { $（“#banana_off，.banana_description”）.hide（）； $（“#香蕉上”）.show（）； } 功能展示胡萝卜（烘焙食品） { $（“#carrot_off，.carrot_description”）.show（）； $（“胡萝卜”）.hide（）； } 功能隐藏箭头（bakedGood） { $（“#carrot_off，.carrot_description”）.hide（）； $（“#胡萝卜上”）.show（）； } 函数showCookie（bakedGood） { $（“#cookie_off，.cookie_description”）.show（）； $（“#cookie_on”）.hide（）； } 功能hideCookie（bakedGood） { $（“#cookie_off，.cookie_description”）.hide（）； $（“#cookie_on”）.show（）； } 函数更改样式表（样式名） { $（“#style_replace”）.attr（“href”，“css/”+styleName+”.css”）； } $（函数（） { $（“.contract、.apple\u description、.banana\u description、.carrot\u description、.cookie\u description”）.hide（）； });

javascript jquery

Javascript 如何在一个较大的函数下压缩和调用for循环或if语句中的每个函数？ .pretty{颜色：粉红色；} 功能展示苹果（bakedGood） { $（“#applepie_off，.apple_description”）.show（）； $（“#applepie_on”）.hide（）； } 功能隐藏包（bakedGood） { $（“#applepie_off，.apple_description”）.hide（）； $（“#applepie_on”）.show（）； } 功能展示香蕉（bakedGood） { $（“#banana_off，.banana_description”）.show（）； $（“#香蕉上”）.hide（）； } 功能hideBanana（bakedGood） { $（“#banana_off，.banana_description”）.hide（）； $（“#香蕉上”）.show（）； } 功能展示胡萝卜（烘焙食品） { $（“#carrot_off，.carrot_description”）.show（）； $（“胡萝卜”）.hide（）； } 功能隐藏箭头（bakedGood） { $（“#carrot_off，.carrot_description”）.hide（）； $（“#胡萝卜上”）.show（）； } 函数showCookie（bakedGood） { $（“#cookie_off，.cookie_description”）.show（）； $（“#cookie_on”）.hide（）； } 功能hideCookie（bakedGood） { $（“#cookie_off，.cookie_description”）.hide（）； $（“#cookie_on”）.show（）； } 函数更改样式表（样式名） { $（“#style_replace”）.attr（“href”，“css/”+styleName+”.css”）； } $（函数（） { $（“.contract、.apple\u description、.banana\u description、.carrot\u description、.cookie\u description”）.hide（）； });,javascript,jquery,Javascript,Jquery,起初的大文本 <html> <head> <link rel="stylesheet" href="css/general.css" /> <link id="style_replace" rel="stylesheet" href="css/default.css" /> <script type="text/javascript" src="js/jquery-1.5.min.js"&g

起初的大文本

<html>
    <head>
    <link rel="stylesheet" href="css/general.css" />
        <link id="style_replace" rel="stylesheet" href="css/default.css" />
        <script type="text/javascript" src="js/jquery-1.5.min.js"></script>
        <style type="text/css">.pretty { color:pink; }</style> 
        <script type="text/javascript">
        function showApple(bakedGood)
        {
            $("#applepie_off, .apple_description").show();
            $("#applepie_on").hide();
        }

        function hideApple(bakedGood)
        {
            $("#applepie_off, .apple_description").hide();
            $("#applepie_on").show();
        }

        function showBanana(bakedGood)
        {
            $("#banana_off, .banana_description").show();
            $("#banana_on").hide();
        }

        function hideBanana(bakedGood)
        {
            $("#banana_off, .banana_description").hide();
            $("#banana_on").show();
        }

        function showCarrot(bakedGood)
        {
            $("#carrot_off, .carrot_description").show();
            $("#carrot_on").hide();
        }

        function hideCarrot(bakedGood)
        {
            $("#carrot_off, .carrot_description").hide();
            $("#carrot_on").show();
        }

        function showCookie(bakedGood)
        {
            $("#cookie_off, .cookie_description").show();
            $("#cookie_on").hide();
        }

        function hideCookie(bakedGood)
        {
            $("#cookie_off, .cookie_description").hide();
            $("#cookie_on").show();
        }

        function changeStyleSheet(styleName)
        {
            $("#style_replace").attr("href", "css/" + styleName + ".css");
        }

    $(function()
        {
            $(".contract, .apple_description, .banana_description, .carrot_description, .cookie_description").hide();

        });

</script>

Recepie列表
苹果派

这是我祖母的苹果派食谱

我从来没有见过另一个像这样的

它将永远是我的最爱，并赢得了我

在当地比赛中获得了几项一等奖

我希望它也能成为你的最爱之一！

香蕉面包

为什么要破坏香蕉的味道？这个香蕉

面包是潮湿可口的，含有大量的

香蕉味！朋友和家人都喜欢我的食谱

说这是迄今为止最好的！烤得真好！！享受吧！

胡萝卜蛋糕

为什么要破坏香蕉的味道？这个香蕉

面包是潮湿可口的，含有大量的

香蕉味！朋友和家人都喜欢我的食谱

说这是迄今为止最好的！烤得真好！！享受吧！

节日饼干

这是一个古老的家庭食谱，制作出了一个非常

美味的饼干。

用法：

function showMyStuff(name,what) {
if(what) {
$("#"+name+"_off, ."+name+"_description").show();
$("#"+name+"_on").hide();
}
else {
$("#"+name+"_off, ."+name+"_description").hide();
$("#"+name+"_on").show();
}
}

这可以大大简化

showMyStuff("carrot",true) // this equals to the showCarrot();
showMyStuff("carrot",false) // this equals to the hideCarrot();

我使用了以

[$='']

属性选择器结尾，使用了非选择器

:not（）

选择器和添加遍历器。因为您使用的是jQuery，所以不必内联绑定
onclick
事件，请使用click事件绑定器
click事件查找被单击元素的所有同级，除了
h3
和
img
标记和调用
toggle（）
，如果隐藏则显示，如果显示则隐藏

工作示例：
看起来您正在尝试创建手风琴风格的界面。如果是这样，您可能想看看作为JQuery UI一部分的accordion小部件：

如果您想将更改集中在“描述”和“按钮”上，您可以通过以下方式更改@hunter的答案：

$(function() { $(".contract, [class$='_description']").hide(); $("a[id$='_on']").click(function(e){ e.preventDefault(); $(this).siblings(":not(img,h3)").add(this).toggle(); }); $("a[id$='_off']").click(function(e){ e.preventDefault(); $(this).siblings(":not(img,h3)").add(this).toggle(); }); });
及
这是一把@Hunter的小提琴，经过修改：
首先，我从HTML中删除了
onclick
处理程序，并将它们放在jQuery中
然后在单击函数中，我使用了方法
next（）
、
prev（）
和
nextAll（）
来帮助查找要显示和隐藏的适当元素。有关这些方法的更多信息，请参阅

$(this).siblings(".contract, [class$='_description']").add(this).toggle();

您可能需要查看jQuery.toggle（）；哇！非常感谢大家！我会处理好这些，然后再告诉你我最终是如何把它们组装起来的！我得承认这些有点让我不知所措。。。最后我做了两个函数，一个用于显示，一个用于隐藏：函数showId（bakedGood）{$（“#“+bakedGood+”.description.contract”）.show（）$（“#“+bakedGood+”.expand”）.hide（）}.function hideId（bakedGood）{$（“#“+bakedGood+”.description.contract”）.hide（）$（“#“+bakedGood+.expand”）.expand”）.show（）}.function（）函数{$（“h3”）.toggleClass（“pretty”）；}
$(this).siblings(".expand, [class$='_description']").add(this).toggle();

$(this).siblings(".contract, [class$='_description']").add(this).toggle();

$('.expand').click(function(e){ e.preventDefault(); $this = $(this); $this.nextAll('p').first().show(); $this.next('.contract').show(); $this.hide(); }); $('.contract').click(function(e){ e.preventDefault(); $this = $(this); $this.nextAll('p').first().hide(); $this.prev('.expand').show(); $this.hide(); });