Question

JQuery很新，我很难理解.each（）。

我希望能够点击任何标题，并显示该标题下的段落，然后消失。目前，我只能得到第一段切换。

我的代码是：

<script>
$(document).ready(function(){
  $("h2").click(function(){
    $("#hidden").each(function(){
        $(this).toggle();      
    });
  });
});

</script>

<h2>HEADING 1</h2>
<div id="hidden" style="display:none">
<p>paragraph 1</p>
</div>

<h2>HEADING 2</h2>
<div id="hidden" style="display:none">
<p>paragraph 2</p>
</div>

非常感谢您的帮助！

Answer 1

元素的ID必须是唯一的使用类属性才能对类似的元素进行分组

<h2>HEADING 1</h2>
<div class="hidden" style="display:none">
<p>paragraph 1</p>
</div>

<h2>HEADING 2</h2>
<div class="hidden" style="display:none">
<p>paragraph 2</p>
</div>

然后也没有必要使用每个循环，你可以在选择器返回的jQuery包装器中调用.toggle（）$（'。hidden'）

$(document).ready(function(){
  $("h2").click(function(){
    $('.hidden').toggle();      
  });
});

更新未阅读完整的问题问题似乎是如何切换下一个div

$(document).ready(function(){
  $("h2").click(function(){
    $('.hidden').hide();
    $(this).next().toggle();      
  });
});

演示：Fiddle

Answer 2

each不是问题所在。您实际上不需要使用each。

问题是使用ID（'#hidden）选择隐藏的div，这只会返回找到的第一个元素，因为预计ID将是唯一的。

要解决此问题，您可以将代码更改为此，假设您要切换的div始终位于标题标记之后：

$(document).ready(function(){
  $("h2").click(function(){
    $(this).next('div').toggle();      
  });
});

这将在点击的h2之后切换下一个div的可见性。

工作示例 - http://jsfiddle.net/VcRLM/

Answer 3

ID必须是唯一的。你的id（“隐藏”）被使用了两次。你可以改用类。

更新：只需将您的代码粘贴到jsfiddle中，看到每个标题下面都有一个段落。您必须使用容器或某些属性来切换这些段落。

HTML：

<div class="box">
<h2>HEADING 1</h2>
<div class="hidden" style="display:none">
<p>paragraph 1</p>
</div>
</div>

<div class="box">
<h2>HEADING 2</h2>
<div class="hidden" style="display:none">
<p>paragraph 2</p>
</div>
</div>

JS：

$(document).ready(function(){
  $("h2").click(function(){
    var myparent=$(this).parent();
    $(".hidden", myparent).each(function(){
        $(this).toggle();      
    });
  });
});

Answer 4

$(function() {
    // Grab all the headings in the page and listen to click event.
    $('h1').click(function () {
        // "this" refers to the current element which is an h2.
        // We're targeting the next element which is the #hidden div
        $(this).next('#hidden').toggle();
    });
});

注意：使用javascript隐藏div是个好主意禁用javascript的浏览器仍然可以看到#hidden div，因此代码将是：

$(function() {
    // hide the #hidden by default
    $('#hidden').hide();

    // Grab all the headings in the page, and listen when they're clicked 
    $('h2').click(function () {
        // the this keyword refers to the current element which is h2.
        // we're targeting here the next element which is the #hidden div
        $(this).next('#hidden').toggle();
    });
});

Answer 5

抱歉，我认为你没有理解.each（）

的含义

你编写代码的方式，这意味着你的函数将遍历div“hidden”中的每个CHILD。

顺便说一下： ID不应该比ONCE更多地使用。所以你的HTML代码是无效的，第二个隐藏应该更像是“hidden1”...你要找的是“类”所以如果你使用类，你可以多次使用相同的类名..你可以使用以下代码：

<script>
$(document).ready(function(){
  $("h2").click(function(){
    $('.hidden').toggle();
  });
});

</script>

<h2>HEADING 1</h2>
<div class="hidden" style="display:none">
<p>paragraph 1</p>
</div>

<h2>HEADING 2</h2>
<div class="hidden" style="display:none">
<p>paragraph 2</p>
</div>

现在解释函数“each”

如果您有以下列表：

<ul id="mylist">
     <li>entry 1</li>
     <li>entry 2</li>
     <li>entry 3</li>
</ul>

你使用.each（）函数为id“mylist”，如下所示：

$("#mylist").each(function(){
  /*here you are iteratin through the <li> entries 1-3*/
});

你甚至知道什么是循环吗？喜欢：for，foreach，while等？

Answer 6

理查兹的答案很好，但我更喜欢不引人注目的做事方式，如下：

HTML：

<div class="toggleable">    
    <h2>HEADING 1</h2>
    <div class="hidden" style="display:none">
        <p>paragraph 1</p>
    </div>
</div>

<div class="toggleable">    
    <h2>HEADING 2</h2 >
    <div class="hidden" style="display:none">
        <p>paragraph 2</p>
    </div>
</div>

脚本：

$(document).ready(function () {
    $(".toggleable").on("click", "h2", function () {        
        $(this).closest("div").find(".hidden").toggle();
    });
});

JQuery .each（）切换隐藏的元素

6 个答案: