JQuery .each（）切换隐藏元素

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> 

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

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

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

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

演示：Fiddle

Answer 2

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：ANE元件的

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

Answer 3

对不起，我想你没有unterstand的意思.each（）

您编写代码的方式，这意味着，您的函数将遍历每个CHILD该div“隐藏”。

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

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

现在功能的说明“每个”

，如果你有这样的列表：

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

和使用的id。每个（）函数“mylist”是这样的：

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

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

Answer 4

each这里不是问题。您实际上不需要使用each。

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

要解决这个问题，你可以更改您的代码此假设你想切换div的标题标签后直接永远是：

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

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

工作的例子 - http://jsfiddle.net/VcRLM/

Answer 5

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

注：这是一个好主意，隐藏与JavaScript的股利，使 的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 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(); 
    }); 
});