更有效的jQuery代码

我有九种不同的开关和面板，它们的工作方式正是我想要的。然而，我怀疑我的jQuery代码可能要短得多

很抱歉问了个新手问题，我还在学习

<script> 
$(document).ready(function(){
    $("#toggle1").click(function(){
        $("#panel1").slideToggle("fast");
    });
    $("#toggle2").click(function(){
        $("#panel2").slideToggle("fast");
    });
    $("#toggle3").click(function(){
        $("#panel3").slideToggle("fast");
    });
    $("#toggle4").click(function(){
        $("#panel4").slideToggle("fast");
    });
    $("#toggle5").click(function(){
        $("#panel5").slideToggle("fast");
    });
    $("#toggle6").click(function(){
        $("#panel6").slideToggle("fast");
    });
    $("#toggle7").click(function(){
        $("#panel7").slideToggle("fast");
    });
    $("#toggle8").click(function(){
        $("#panel8").slideToggle("fast");
    });
    $("#toggle9").click(function(){
        $("#panel9").slideToggle("fast");
    });
});
</script>

$（文档）.ready（函数（）{
$（“#切换1”）。单击（函数（）{
$（“#panel1”）。滑动切换（“快速”）；
});
$（“#切换2”）。单击（函数（）{
$（“#panel2”）。滑动切换（“快速”）；
});
$（“#切换3”）。单击（函数（）{
$（“#panel3”）。滑动切换（“快速”）；
});
$（“#切换4”）。单击（函数（）{
$（“#panel4”）。滑动切换（“快速”）；
});
$（“#切换5”）。单击（函数（）{
$（“面板5”）。滑动切换（“快速”）；
});
$（“#切换6”）。单击（函数（）{
$（“#panel6”）。滑动切换（“快速”）；
});
$（“#切换7”）。单击（函数（）{
$（“#panel7”）。滑动切换（“快速”）；
});
$（“#切换8”）。单击（函数（）{
$（“#panel8”）。滑动切换（“快速”）；
});
$（“#切换9”）。单击（函数（）{
$（“面板9”）。滑动切换（“快速”）；
});
});

编辑：这里还有基本的HTML结构。我应该把它放在第一位。我只包括了前三个切换，因为我不允许在这里发布太多代码。所有九个div看起来一模一样

<div class="col">
    <h2 id="toggle1"></h2>
    <ul id="panel1">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<div class="col">
    <h2 id="toggle2"></h2>
    <ul id="panel2">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<div class="col">
    <h2 id="toggle3"></h2>
    <ul id="panel3">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

像这样的东西怎么样

var i = 0;

for (i = 0; i < 10; i += 1) {
    $("#toggle" + i.toString()).click(function(){
        $("#panel" + i.toString()).slideToggle("fast");
    });
}

var i=0；
对于（i=0；i<10；i+=1）{
$（“#切换”+i.toString（））。单击（函数（）{
$（“#panel”+i.toString（））.slideToggle（“fast”）；
});
}

这将用于选择包含切换的所有id：

$("[id^=toggle]").click(function(){
    $(this).next("[id^=panel]").slideToggle("fast");
});

---

您可以在jQuery页面中找到有关选择器的更多信息：

只需使用1-9循环。。。这是ES6中的一行

---

for（让i=1；i$（`panel${i}'）。slideToggle（“fast”）

根据您的代码，您可以使用（

[attribute^='value']

）和

$（文档）.ready（函数（）{
$（“[id^='toggle']”）。单击（函数（）{
$（this）.next（'ul'）.slideToggle（“fast”）；
});
});

1.

一,
一,
一,
一,

2.

二,
二,
二,
二,

3.

三,
三,
三,
三,

您可以使用：

$(document).ready(function(){
    $('[id^="toggle"]').click(function(e){
        $('#panel'+idIndex($(this))).slideToggle("fast");
    });
});

function idIndex(e){
  return parseInt(e.attr('id').replace(/[^0-9]/gi, ''));
}


与：

与：

您可能可以使用DOM遍历将所有单击处理程序减少到三行，但这取决于HTML的结构。请你编辑一下这个问题，把相关问题的样本包括进去好吗HTML@FarhanQasim使用合理的标记，这可以通过零循环（在我们的代码中）完成。@DOMcat请编辑问题的HTML，这样我们就可以停止对回答者的所有否决，做出可怕的假设，并提供一些真正的黑客解决方案。包括HTML，谢谢你指出这一点。这个问题应该有一个成果：“发动了一场反对票战争”。至少是西尔弗。你不会得到一个解释，因为这里有这么多聪明的人，他们能写出完美的代码，而且比任何人都能帮得上忙。我就是这么想的。因为就我而言，这个一行程序是有效的。我同意它是有效的，但是有很多更好的方法，如果OP花时间将他们的HTML添加到问题中，可以提供其中一种。为了记录在案，我没有否决你。在没有HTML布局的情况下，我只是重写了OP的原始代码。当然，这不是最好的方法（我永远不会为每个id附加一个事件侦听器），但至少它回答了这个问题，并且有效，所以我不确定我是否值得被奶牛男孩（不是你，注意到），但mehNice回答。如果你能解释一下ES6的各种细微差别，我想这会帮助很多人。破烂的代码（一个额外的
“
）和笨拙的双重
I=0
和
I+=1
，但是，这个答案不会像其他答案那样被默默地否决。呃
I++
太主观了。额外的
”
是一个输入错误，但如果“使用”此代码的人不知道如何诊断和修复它，他们可能不应该使用其他人的解决方案。是的，我知道，只是其他（真正）有效的答案由于某种原因被大量否决，而你的答案没有。而且
i++
比
i++=1
更优雅，你不能反驳：）@谢谢你以后的参考，小心使用
。下一个（选择器）
因为它找不到与选择器匹配的下一个元素，它只给出下一个元素，然后只有在匹配时才给出。
$(document).ready(function(){
    $('[id^="toggle"]').click(function(e){
        $('#panel'+idIndex($(this))).slideToggle("fast");
    });
});

function idIndex(e){
  return parseInt(e.attr('id').replace(/[^0-9]/gi, ''));
}

$(document).ready(function(){
    $('[id^="toggle"]').click(function(e){
        $(this).next('[id^="panel"]').slideToggle("fast");
        //you can even use 'ul' instead of '[id^="panel"]'
    });
});

$(document).ready(function(){
    $('.col').each(function(){
        var col = this;
        $(col).find('h2').click(function(){
          //the same as the previous, you can use '[id^="toggle"]' instead of h2
          $(col).find('ul').slideToggle('fast');
          //and here, '[id^="panel"]'
        });
    });
});