jQuery .click.each function

Question

Artı (+) resmin bulunduğu bir kod yaptım. Tıkladığınızda, dönüş 45 ° (x) olana kadar döner. Ben toggleClass ile yapıyorum ... Şimdi, bu görüntülerin yaklaşık 7 tane var, ama bu tıklama olayı SADECE için birincisi, neden? i each fonksiyonunu çalıştı, ama hala aynı .. tamamen kayıp ...

jQuery kodu vardır:

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

burada HTML açıklanmıştır:

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

ve 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; 
} 

Umut, şimdi sorunumu gidermek için maksimum bilgiye sahipsiniz. corse, THERE is link to my website ki, sayfanın alt kısmında yüzden bana

Teşekkür

NOT yardım edin ... denemek, baksana! HTML id özelliği benzersiz değerlere sahip olmalıdır neden ....

Answer 1

Edge Acayip duruyor, senin gibi farklı elementler için aynı id değerini tekrar edemez, bilmiyorum.

, bu çözmek class="plus_x" bu id="plus_x" özelliklerini değiştirmek ve each üzerinde $(".plus_x") seçici yapmak için.

Ancak, değerler item, date ve plus ile diğer id özellikleri ile aynı sorun var, bu yüzden sen CSS aynı zamanda, aynı zamanda benzer bir şekilde bu çözmeliyiz.

Son olarak, bir seferde tüm eşleşmeler için bir tıklama işleyicisi tanımlayabileceğiniz için, amacınız için bir each yapmanıza gerek yoktur. Sen .closest() ile yapabileceğiniz tıklanan öğeye ait .item bulmak gerekir: Birkaç elemanlar için aynı kimlik ('plus_x') ilan çünkü

$(".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

hata oluşur. 'click' işleyicisi, ilk öğeye bu ID ile uygulanır ve diğerleri yoksayılır. Kimliği ile sadece bir elemanı hedefleyebilirsiniz. Sonra

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

bu sınıfın tüm unsurları hedef seçici değiştirin::

Bunu düzeltmek için bir sınıf niteliği ilanına <img> elemanları kimlik özelliği beyanı değiştirmek

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