JQuery .each() to toggle hidden elements [closed]

问题

Very new to JQuery, and am struggling to understand .each().

I would like to be able to click on any heading, and have the paragraph under that heading appear, and then disappear. At the moment, I can only get the first paragraph to toggle.

My code is:

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

Thanks very much for any help!

回答1:

ID of ane element must be unique use class attribute to group similar elements

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

then also there is no need to use a each loop, you can call .toggle() in the jQuery wrapper returned by the selector $('.hidden')

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

Update Didn't read the complete question the question seems to be how to toggle the next div

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

Demo: Fiddle

回答2:

each isn't the problem here. You don't actually need to use each.

The issue is selecting the hidden div using an ID ('#hidden), this will only return the first found element as it is expected that ID's will be unique.

To get around this you can change your code to this assuming that the div you want to toggle is always directly after the heading tag:

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

This will toggle the visibility of the next div after the h2 that was clicked.

Working example - http://jsfiddle.net/VcRLM/

回答3:

An ID has to be unique. Your id ("hidden") is used twice. You can use classes instead.

Update: Just pasted your code in a jsfiddle and saw that you have one paragraph below each heading. You will have to use a container or some attribute to toggle these paragraphs.

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

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

NOTE: it's a good idea to hide the div with javascript so that javascript-disabled browsers still can see the #hidden div so the code will be:

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

回答5:

Richards answer was a good one, but I prefer unobtrusive way of doing things like this, like so:

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>

Script:

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

回答6:

sorry i think you did not unterstand the meaning of .each()

the way you wrote the code, it means, that your function is going to iterate through each CHILD within the div "hidden".

by the way: An ID is not supposed to be used more than ONCE. so your html code is invalid, the second hidden should be more like "hidden1" ... what you're looking for is "class" so if you work with classes you can use the same classname more than once.. you can use the following code:

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

and now the explanation of the function "each"

if you have a list like:

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

and you use the .each() function for id "mylist" like this:

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

do you even know what loops are? like: for, foreach, while etc. ?

来源：https://stackoverflow.com/questions/20634975/jquery-each-to-toggle-hidden-elements

标签

jquery

toggle

each