jquery - 附加到每个列表项的 JQuery 单击函数

Question

我想在 HTML 文档正文的侧边区域附加三个 <li>

嘿1

嘿2

嘿3

并为它们中的每一个附加了一个单击切换功能，以便它可以在 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 > ，并将 click 函数附加到它们上。
问题是，当我特别想要的是，当我点击 <li> Hey1 时，我点击了所有三个 <div> 的切换，然后只有 <div id="id1 " > 我是那个</div> 将被显示和隐藏。

我感谢任何帮助

Answer 1

您没有将点击处理程序附加到li's，而是附加到aside, do ：

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