javascript - jQuery:循环迭代编号类？

Question

我看了帖子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(仅循环一次)，则它适用于第一组。请指教。谢谢

Answer 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/

请注意，如果您单击 fiddle 中的问题，警报就会显示正确的编号。或者，您可以使函数内联，尽管我发现在大多数情况下单独的函数更干净一些。

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