jquery - 各リスト項目に添付された JQuery クリック関数

Question

HTML 文書の body の aside 領域に 3 つの < li > を追加したい

ちょっと1

Hey2

Hey3

HTML の本文で適切な div を表示および非表示にできるように、それぞれにクリック トグル機能を追加しました。

   </aside>
  <div id="id1" > I am the  one </div>
  <div id="id2" > I am the  second</div>
  <div id="id3" > I am the  third</div>
  </body>

たとえば、< li > Hey1 添付のクリック機能は、id="id1" などの div のみを切り替えます。

私が書いたコードは

   $(document).ready(function() {   $("div").hide();    
   jQuery.each([1,2,3], function(n,value){ n++; 

    $('aside').append("<li> hey"+value+" </li>").click(function(){$('#id'+value).toggle()});
    });
    })

これで、コードは < li > を作成し、それらにクリック機能を追加します。問題は、 < li > のいずれかが < div > の 3 つすべてのトグルを
クリックすることです。 " > I am the one < /div> が表示され、非表示になります。

どんな助けにも感謝します

Answer 1

クリック ハンドラーを にアタッチするのではなく、 にアタッチしliますaside。

$(document).ready(function() {   
    $("div").hide();    
    $.each([1,2,3], function(n,value){
      $('<li />', {text: 'hey'+value}).appendTo('aside').on('click', function() {
          $('#id'+value).toggle();
      });
    });
});

Answer 2

これは、li ではなく、脇にクリック イベントを添付するためです。

$(document).ready(function() {   $("div").hide();    
    $.each([1,2,3], function(n,value){
        n++; 
        $li = $("<li> hey"+value+" </li>").click(function(){
            $('#id'+value).toggle();
        });
        $('aside').append($li);
    });
})