JQuery .each() zum Umschalten der versteckten Elemente

Sehr neu in JQuery und bin kämpfen, um zu verstehen .each().

Ich würde gerne in der Lage, klicken Sie auf eine überschrift, und der Absatz unter dieser überschrift erscheinen, und dann verschwinden. Im moment kann ich nur den ersten Absatz zu wechseln.

Mein code ist:

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

Vielen Dank für jede Hilfe!!!

HTML-ids müssen eindeutig sein. Wenn Sie möchten, zu teilen eine Kennung zwischen mehreren Elementen einer Klasse. Darüber hinaus .each wäre nicht erforderlich, weil sowieso $("#hidden").toggle() würde das gleiche tun.
und BTW, Ihr jede Schleife ist nutzlos

InformationsquelleAutor user1573524 | 2013-12-17

ID ane-element muss eindeutig sein, verwenden Sie class-Attribut zur Gruppierung ähnlicher Elemente

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

dann gibt es auch keine Notwendigkeit zur Verwendung eines each-Schleife, die Sie anrufen können .toggle() in der jQuery-wrapper zurück durch den Selektor $('.hidden')

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

Update nicht Lesen Sie die vollständige Frage scheint die Frage zu sein, wie Sie zum Umschalten die nächste div

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

Demo: Fiddle

InformationsquelleAutor Arun P Johny

2

each ist nicht das problem hier. Sie nicht wirklich brauchen, zu verwenden each.

Das Problem ist die Auswahl der hidden div mit einer ID ('#hidden), dies wird nur das erste Gefundene element, wie es wird erwartet, dass ID ' s eindeutig sein.

Dies zu umgehen, können Sie den code ändern, um dies unter der Annahme, dass das div, die Sie möchten, zu wechseln ist immer direkt nach der überschrift-tag:
```
$(document).ready(function(){
  $("h2").click(function(){
    $(this).next('div').toggle();      
  });
});
```
Dies schaltet die Sichtbarkeit der nächste div-nach der h2, auf die geklickt wurde.

Beispiel - http://jsfiddle.net/VcRLM/

InformationsquelleAutor Richard Dalton

Eine ID muss eindeutig sein. Ihre id ("hidden") zweimal verwendet wird. Sie können Klassen statt.

Update:
Nur klebte den code auf jsfiddle und sah, dass Sie einen Absatz unter jeder überschrift.
Verwenden Sie einen Behälter oder ein Attribut zum Umschalten in diesen Absätzen.

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

InformationsquelleAutor Jens

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

HINWEIS: es eine gute Idee, das ausblenden des div mit javascript, so dass
javascript-deaktiviert Browser noch sehen können, die #hidden-div, damit wird der code sein:

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

Das element in der OP-code ist in H2 und nicht in H1.

InformationsquelleAutor Bounasser Abdelwahab

Richards Antwort war gut, aber ich bevorzuge unaufdringliche Art und Weise zu tun, Dinge wie diese, etwa 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>

Skript:

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

Alternativ mit der original-HTML-code, den Sie ersetzen könnte .am nächsten("div").finden(".hidden") mit einem einzelnen Aufruf .next(".versteckt").
True, aber wenn Sie möchten, fügen Sie eine weitere divs dort wird der nächste pick der ersten nur. Natürlich könnten Sie nextAll dann.

InformationsquelleAutor Esko

0

sorry, ich glaube, Sie hat nicht das verstehen der Bedeutung .each()

den Weg, den Sie schrieb den code, es bedeutet, dass Sie Ihre Funktion wird Durchlaufen und jedes KIND innerhalb der div "versteckt".

übrigens:
Eine ID sollte nicht mehr als EINMAL verwendet werden. also dein html-code ist ungültig, der zweite versteckt sollte mehr wie "hidden1" ... was du suchst ist "Klasse" also, wenn Sie mit Klassen arbeiten, können Sie mit den gleichen classname mehr als einmal.. Sie können den folgenden code verwenden:
```
<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>
```
und nun eine Erklärung der Funktion "jeder"

wenn Sie eine Liste wie:
```
<ul id="mylist">
     <li>entry 1</li>
     <li>entry 2</li>
     <li>entry 3</li>
</ul>
```
sind und Sie die .each () - Funktion für die id "mylist" wie folgt:
```
$("#mylist").each(function(){
  /*here you are iteratin through the <li> entries 1-3*/
});
```
tun Sie auch wissen, was Schleifen sind? wie: for, foreach, while, etc. ?

InformationsquelleAutor Black Ops

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.