jQuery .click.each関数

Question

プラス（+）画像があるコードを作成しました。クリックすると、回転が45°（x）になるまで回転します。私はtoggleClassを通してそれを作っています...今、私はそれらのイメージの約7を持っていますが、このクリックイベントは最初のもののためだけに実行されています、なぜですか？私はeach機能を試してみましたが、それでも同じ..完全に失われた...

は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")); 
      }); 
    }); 

がここに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> 

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

今、問題を解決するための最大限の情報があります。コルスの、THERE is link to my website、ページの下部にあるので、それを試して、それをチェックアウト...私を助けてください

おかげ

NOTE！

はエッジにかなり奇妙なルックス、HTMLで....

Answer 1

id属性は一意の値を持たなければならない理由、あなたはあなたが行うような異なる要素に対して同じid値を繰り返すことはできませんわかりません。これを解決するclass="plus_x"することにより、これらのid="plus_x"の属性を交換し、あなたのeach$(".plus_x")上のセレクターを行うに

。あなたもまた、あなたのCSSには、同様の方法でそれを解決する必要があるので、

はしかし、あなたは、値item、dateとplusと他のidの特性と同じ問題を抱えています。

最後に、すべての一致に対してクリックハンドラを一度に定義できるので、eachを実行する必要はありません。あなたは.closest()で行うことができますクリックした項目に属する.itemを見つける必要があります：あなたはいくつかの要素に同じID（'plus_x'）を宣言しているため

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

エラーが発生しました。 'click'ハンドラは、そのIDを持つ最初の要素に適用され、その他は無視されます。 1つの要素だけをIDでターゲティングできます。

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

そして、そのクラスを持つすべての要素を標的とするようにセレクタを変更：

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