jQuery .click.each Funktion

Question

Ich habe einen Code erstellt, wo es ein Plus (+) Bild gibt. Wenn Sie darauf klicken, dreht es sich, bis die Drehung 45 ° (x) beträgt. Ich mache es durch toggleClass ... Jetzt habe ich ungefähr 7 dieser Bilder, aber dieses Klicken Ereignis läuft NUR für das erste, warum? Ich habe versucht, each Funktion, aber gleiche noch .. total verloren ...

es ist der Code für jQuery:

$("#plus_x").each(function() { 
$(this).on("click", function(){ 
       console.log("CLICK!"); 
       $(this).toggleClass("box_rotate box_transition"); 
       $("#item").hasClass("open-panel") 
        ? ($("#item").delay(250).animate({height: '75px'}), 
         $("#item").removeClass("open-panel")) 

        : ($("#item").delay(250).animate({height: "300px"}), 
         $("#item").addClass("open-panel")); 
      }); 
    }); 

hier HTML:

<div id="timeline"> 
       <div id="item" style="border-left: 4px solid #8E44AD;"> 
        <div id="date"> 
         <h1>31. 5.</h1> 
        </div> 

        <div id="plus"> 
         <img id="plus_x" src="plus.png" style=""> 
        </div> 
       </div> 
       <div id="item"> 
        <div id="date"> 
         <h1>31. 5.</h1> 
        </div> 

        <div id="plus"> 
         <img id="plus_x" src="plus.png" style=""> 
        </div> 
       </div> 
       <div id="item"> 
        <div id="date"> 
         <h1>31. 5.</h1> 
        </div> 

        <div id="plus"> 
         <img id="plus_x" src="plus.png" style=""> 
        </div> 
       </div> 
       <div id="item"> 
        <div id="date"> 
         <h1>31. 5.</h1> 
        </div> 

        <div id="plus"> 
         <img id="plus_x" src="plus.png" style=""> 
        </div> 
       </div> 
      </div> 

und css ..:

#item{ 
    height: 75px; 
    width: 100%; 
    background-color: white; 
    border-bottom: 2px solid #464646; 
} 

    .item_roll{ 
     height: 275px; 
    } 

.box_rotate { 
    -webkit-transform: rotate(45deg); /* Chrome, Safari 3.1+ */ 
    -moz-transform: rotate(45deg); /* Firefox 3.5-15 */ 
     -ms-transform: rotate(45deg); /* IE 9 */ 
     -o-transform: rotate(45deg); /* Opera 10.50-12.00 */ 
     transform: rotate(45deg); /* Firefox 16+, IE 10+, Opera 12.50+ */ 
} 
.box_transition { 
    -webkit-transition: all 0.3s ease-out; /* Chrome 1-25, Safari 3.2+ */ 
    -moz-transition: all 0.3s ease-out; /* Firefox 4-15 */ 
     -o-transition: all 0.3s ease-out; /* Opera 10.50–12.00 */ 
      transition: all 0.3s ease-out; /* Chrome 26, Firefox 16+, IE 10+, Opera 12.50+ */ 
} 

#date{ 
    width: 50%; 
    float: left; 
} 

#plus{ 
    width: 75px; 
    height: 75px; 
    float: right; 
    padding: 22.5px; 
} 

Hoffe, Sie haben jetzt maximale Informationen, um mein Problem zu beheben. Corse, THERE is link to my website, so am unteren Rand der Seite, überprüfen Sie, dass, versuchen Sie es ... Bitte helfen Sie mir

Dank

HINWEIS!

Sieht ziemlich seltsam in Rand, weiß nicht, warum ....

Answer 1

Das id Attribut in HTML müssen eindeutige Werte haben, können Sie nicht den gleichen id Wert für verschiedene Elemente wiederholen wie Sie.

Um dies zu lösen, ersetzen diese id="plus_x" Attribute von class="plus_x" und Ihre each auf $(".plus_x") Wähler tun.

Sie haben jedoch das gleiche Problem mit anderen id Eigenschaften mit Werten item, date und plus, so müssen Sie auch, dass in einer ähnlichen Art und Weise zu lösen, auch in Sie CSS.

Schließlich ist es für Ihren Zweck nicht notwendig, eine each zu tun, wie Sie einen Click-Handler für alle Spiele auf einmal definieren können. Sie verlassen nun die .item Zugehörigkeit zur geklickten Artikel finden müssen, die Sie mit .closest() tun können:

$(".plus_x").on("click", function(){ 
    console.log("CLICK!"); 
    $(this).toggleClass("box_rotate box_transition"); 
    // get ancestor that has "item" class: 
    var $item = $(this).closest(".item"); 
    $item.delay(250).animate({ 
     height: $item.hasClass("open-panel") ? '75px' : '300px' 
    }); 
    $item.toggleClass("open-panel"); 
}); 

Answer 2

Der Fehler tritt auf, weil Sie die gleiche ID deklariert ('plus_x') für mehrere Elemente. Der Handler 'click' wird auf das erste Element mit dieser ID angewendet, und die anderen werden ignoriert. Sie können nur ein Element nach seiner ID ausrichten.

Um dies zu beheben, die Deklaration id-Attribut ändern für die <img> Elemente einer Klasse Attributdeklaration:

<img class="plus_x" src="plus.png" style=""> 

Dann den Wähler ändern alle mit dieser Klasse die Elemente zum Ziel:

$(".plus_x").each(function() {