Question

我想要三个＆lt; li>附加在HTML文档正文的旁边区域

Hey1

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>

例如＆lt; 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()});
    });
    })

现在代码创建＆lt; li>没问题，它附加了点击功能。问题是，无论哪个＆lt; li>我点击了所有三个＆lt; div> s切换
当我特别想要的时候就是这样说的＆lt; li> Hey1点击了那个区域＆LT; div id =“id1”＆gt;我是那个＆lt; / DIV＆GT; 将被显示和隐藏。

我感谢任何帮助

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

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

2 个答案: