jQuery.each（）麻烦

Question

我会尽量保持这个短。我想，当用户点击一个展开按钮创建一个显示文本或隐藏的箱子。我使用肘节（）方法

的标记是这样的：

<span id="toggle0">+</span>
<div id="toggle0Container">
    blablabla...
<div>

<span id="toggle1">+</span>
<div id="toggle1Container">
    blablabla...
<div>

<span id="toggle2">+</span>
<div id="toggle2Container">
    blablabla...
<div>

// etc

在＃toggle0应该切换＃toggle0Container，toggle1将切换＃toggle1Container等等＃。这是所有由PHP生成所以不可能有任何数量的这些容器的

这里的JQuery的代码：

$(document).ready(function() {
    // array of numbers, it's pretty redundant, there will never be more than 30 containers
    var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9 , 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36];
    // hide all containers first
    jQuery.each(arr, function() {
        $('#toggle' + this + 'Container').hide();
    });
    // now the toggle buttons
    jQuery.each(arr, function() {
        $('#toggle' + this).click(function() {
            // this line is not working
            $('#toggle' + this + 'Container').slideToggle('slow');
            // and this just changes the toggle button from + to -
            if ($(this).html() == '+') {
                $(this).html('-');
            } else {
                $(this).html('+');
            }
        });
    });
});

它的工作原理除了来回切换部分（我补充说，不工作线以上的评论）。哪里的问题？

Answer 1

我会按照mgroves的做法，但如果你真的想要做的事情阵列，或只是想弄清楚如何使用每个（）正确，这里是你应该如何使用它：

$(document).ready(function() {
    // array of numbers, it's pretty redundant, there will never be more than 30 containers
    var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9 , 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36];
    // hide all containers first
    jQuery.each(arr, function(index, item) {
        $('#toggle' + item + 'Container').hide();
    });
    // now the toggle buttons
    jQuery.each(arr, function(index, item) {
        $('#toggle' + item).click(function() {
            // this line is not working
            $('#toggle' + item + 'Container').slideToggle('slow');
            // and this just changes the toggle button from + to -
            if ($(this).html() == '+') {
                $(this).html('-');
            } else {
                $(this).html('+');
            }
        });
    });
});

Answer 2

这是因为“这个”现在是在不同的范围，并且参照实际#toggleN DOM元素，而不是阵列中的号码之一。

我建议你沟号数组，并使用不同的选择，是这样的：

$("div[id^=toggle][id$=container]").hide();

$("span[id^=toggle]").click(function() {
     $(this).find("span[id^=toggle][id$=container]").slideToggle("slow");
     // .. do your other html stuff
}

仅有沟那些eachs，并与肘节替换选择。

Answer 3

修改

我喜欢你的特定用例mgroves更好的解决方案，但我会留下我的答案了这解释了如何接受指数与元素的。每个方法

参数

<强>原来的答案

正如其他人所说的背景下， 这个的是不是你认为它是在你所引用的地步。下面是雷米夏普一个伟大的文章，题为“ jQuery的这个：揭秘”我建议你阅读。

的。每个函数可以接受两个参数，这将极大地帮助你，你会不会需要数字的数组。

$('span[id^=toggle']').each(function(idx, elem) {

    // idx is the current index of the jQuery object
    $('#toggle' + idx).click(function() {

        // elem is the current element
        $(elem).next('#toggle' + idx + 'Container').slideToggle('slow');

        if ($(elem).html() == '+') {
            $(elem).html('-');
        } else {
            $(elem).html('+');
        }

    });

});

Answer 4

我建议把一个类上的切换按钮（跨度），如“toggler”等“容器”你拨动容器或东西，以简化您的JavaScript：

$(function() {
    // hide all containers first
    $(".container").hide();
    // now the toggle buttons
    $(".toggler").click(function() {
          var container = $("#" + $(this).attr("id") + "Container");
          container.slideToggle("slow");

          $(this).html(container.is(":visible") ? "-" : "+");
    });
});

给该一个镜头。

Answer 5

正如mgroves说，你范围越来越所有顶起通过使用每个（）。请参阅此获得更多的信息。

Answer 6

我要发布什么马克斯做了有关使用类。我只会提高他用这更容易选择建议，找到容器：

$(function() {
  // hide all containers first
  $(".container").hide();
  // now the toggle buttons
  $(".toggler").click(function() {
    $(this).next().slideToggle("slow");

    if (container.is(":visible")) {
      $(this).html("-");
    }
    else {
      $(this).html("+");
    }
  });
});

如果您不能轻易得到的跨度类，你也许可以用类似$（“＃SpanContainer>跨度”）的标签名称来选择他们，从他们包含的元素降构成同样的选择。

Answer 7

您应该给你的元素，可以上，然后利用next的搜索类。

请您的标记是这样的：

<span class="toggleButton">+</span>
<div class="toggleContainer">
   blablabla...
<div>

现在，您的代码来处理这成为像这样简单：

$('.toggleButton').click(function() {
    $(this).next('.toggleContainer').slideToggle('slow');
});

Answer 8

我最近写了一个相当可观脚本的行为就这样。我参加了，我选择了包装所有给定的隐藏/显示元素的元素中包含分区稍有不同的路线。它可以让你有多个“触发器”一节，如果你需要它，你可以添加隐藏/显示元素的任意数量，而不必担心他们的编号。我将其结构是这样的：

<div class="expSecWrapper">
    <div class="expSecTrigger">Insert Trigger Here</div>
    <div class="expSecBody">
        Content to hide/show
    </div>
</div>

和然后jQuery代码将是这样的：

$(document).ready(function(){
    var targets = $(".expSecWrapper")
    targets.find(".expSecTrigger").click(function(){
        targets.find(".expSecBody").hide()
        $(this).parents(".expSecWrapper").eq(0).children(".expSecBody").toggle();
    })
})

您可以在剩下的相关JS为您的应用程序添加。

它有一些限制，如该必要性隐藏/显示体是包装的直系后代。它可以应用到下拉式选单，单选按钮，等等。这也是可以嵌套的，所以你可以有多个级别，如果隐藏/显示。

最后一件事是，你实际上甚至不需要使用。每次迭代器来指派行为。像。点击（东西）将分配行为的jQuery对象的整个组。只要你使用一个选择，这将抓住所有的你的目标。

抱歉，不得不编辑几次。