Question

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

我有一个<h3>标记列表，这些标记是问题的标题，下面的答案在<p>中。我为每个Q＆amp;创建了课程。如此：

<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");
        });
    }
});

但它并不适用于所有Q＆amp; A套，只有最后一套。即：如果我将最大值设置为2（仅循环一次），它适用于第一组。请指教。感谢

Answer 1

更容易实现此目的的方法是：

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

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

Answer 2

虽然我同意@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/

Answer 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');
  });
});

jQuery：循环遍历编号的类？

3 个答案: