jQuery：循环遍历编号的类？答案

【问题标题】：jQuery: Loop iterating through numbered classes?jQuery：循环遍历编号的类？
【发布时间】：2012-02-15 18:57:41
【问题描述】：

我查看了jQuery: Loop iterating through numbered selectors? 的帖子，但它并没有解决我的问题，而且看起来这不是一个真正有效的答案。

我有一个<h3> 标记列表，这些标记是问题的标题，下面的<p> 中有答案。我为每个问答创建了这样的类：

<h3 class="sec1">Question:</h3><p class="view1">Answer...</p>
<h3 class="sec2">Question:</h3><p class="view2">Answer...</p>
<h3 class="sec3">Question:</h3><p class="view3">Answer...</p>

我使用以下 jQuery 循环来减少 21 个问题的冗余。

$(document).ready(function () {
    for (var i = 1; i < 21; i++) {
        var link = ".sec" + i;
        var content = ".view" + i;

        $(link).click(function () {
            $(content).toggle("fast");
        });
    }
});

但它不适用于所有问答集，仅适用于最后一个。即：如果我将最大值设置为 2（仅循环一次），它适用于第一组。请指教。谢谢

【问题讨论】：

标签： javascript jquery html for-loop onclick

【解决方案1】：

虽然我同意 @gaffleck 你应该改变你的方法，但我认为解释如何修复当前方法是值得的。

问题在于 click 函数没有得到 content 变量的副本，而是引用了同一个变量。在循环结束时，值为.view20。单击任何元素时，它会读取该变量并返回.view20。

解决此问题的最简单方法是将代码移动到单独的函数中。此函数中的content 变量是每次调用该函数时的新变量。

function doIt(i){
    var link = ".sec" + i;
    var content = ".view" + i;

    $(link).click(function () {
        alert(content);
    });
}

$(document).ready(function () {
    for (var i = 1; i < 21; i++) {
        doIt(i);    
    }
});

http://jsfiddle.net/TcaUg/2/

请注意，如果您单击一个问题，则警报具有正确的编号。或者，您可以使函数内联，但我发现在大多数情况下，单独的函数会更简洁一些。

http://jsfiddle.net/TcaUg/1/

【讨论】：

【解决方案2】：

一个更简单的方法是：

$(document).ready(function(){
    $("h3").click(function(){
        $(this).next("p").toggle("fast");
    });
});

这也更安全，因为您可以在将来添加/删除问题和答案，并且您不必更新功能。

【讨论】：

我同意，我要补充的唯一一点是，这取决于 html 的结构。如果要在h3 和p 之间添加一个元素，则会失败。此外，如果页面上还有其他不应具有此功能的 h3 元素，那将是一个问题。
是的，添加使用泛型类来匹配问题和答案更安全：$(document).ready(function(){ $("h3.question").click(function(){ $ (this).next("p.answer").toggle("fast"); }); });
@gaffleck 谢谢。绝对是一个潜在的解决方案。但就像詹姆斯说的那样，我也有一些地方在使用。但这是一个很好的选择。再次感谢您的反馈。

【解决方案3】：

将您的问题包装在更合乎逻辑的结构中，为您的问题块创建适当的范围：

<div id="questions">
  <div class="question">
    <h3 class="sec1">Question:</h3><p class="view1">Answer...</p>
  </div>
  <div class="question">
    <h3 class="sec2">Question:</h3><p class="view2">Answer...</p>
  </div>
  <div class="question">
    <h3 class="sec3">Question:</h3><p class="view3">Answer...</p>
  </div>
</div>

现在像这样遍历它：

$(function() {
  $('#questions .question h3').click(function(){
    $(this).parent().find('.answer').toggle('fast');
  });
});

【讨论】：