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