javascript - jQuery 函数在 Chrome 中不起作用

Question

我有以下 Jquery 脚本来隐藏和显示按钮，具体取决于它所在的 li 标签的类

$('li#test').each(function() {
        if($(this).hasClass('active'))
        {
            //Active class is applied
            $(this).children().children().closest("img").attr("src", "assets/img/button_home_selected3.png");
            $(this).children().children().closest("button").css("display","table");
        }
        else
        {
            $(this).children().children().closest("img").attr("src", "assets/img/button_home_plain1.png");
            $(this).children().children().closest("button").css("display","none");
        }
    });

默认情况下，按钮标签具有显示:无。

html 是:

<ul id="nav-tabs" data-tabs="tabs">
  <li id="test" style="list-style: none;" class="active">
   <a href="#home" data-toggle="tabs" ><img src="assets/img/button_home_selected3.png" id="test2"  width="83"/><span>Home</span></a>
  </li>
</ul>

li 标签是使用脚本动态添加的

$('.plus').click(function(e) {
 e.preventDefault();
 var li_count = $('#nav-tabs').length;
 if (li_count <= 3){
  if(counter <= 3){
   $('#nav-tabs').append('<li id="test" ><a href="#tab' + counter + '" data-toggle="tabs" ><img src="assets/img/button_home_plain1.png" width="83" id="test2">Tab' + counter + '</span><button type="button" class="close">&times;</button></a></li>');
} else { alert("Only 3 Tabs Allowed!")};
}

还有一个在选项卡之间切换的事件标签，这是使用脚本完成的

$('li#test').each(function() {
if($(this).hasClass('active'))
 {//Active class is applied
  $(this).children().children().attr("src", "assets/img/button_home_selected3.png");
 }
 else
 {
  $(this).children().children().attr("src", "assets/img/button_home_plain.png");
 }

});

这适用于 IE 和 firefox，但不适用于 Google Chrome...

Answer 1

您的代码存在一些问题:

1. ID 应该是唯一的。因此，将您的 HTML 更改为:

   <ul id="nav-tabs" data-tabs="tabs">
     <li class="test active" style="list-style: none;">
      <a href="#home" data-toggle="tabs" >
       <img src="assets/img/button_home_selected3.png" class="test2" width="83"/> 
       <span>Home</span>
      </a>
     </li>
   </ul>
   

   javascript:

   $('li.test').each(function() {
     if($(this).hasClass('active'))
     {
       //Active class is applied
       $(this).find("img").attr("src", "assets/img/button_home_selected3.png");
       $(this).find("button").show();
     }
     else
     {
       $(this).find("img").attr("src", "assets/img/button_home_plain1.png");
       $(this).find("button").hide();
     }
   });
   

2. 获取 li 的长度，而不是 ul:

   $('.plus').click(function(e) {
     e.preventDefault();
     var li_count = $('#nav-tabs').find('li').length;
     if (li_count <= 3){
       if(counter <= 3){
         $('#nav-tabs').append('<li class="test"><a href="#tab' + counter + '" data-toggle="tabs" ><img src="assets/img/button_home_plain1.png" width="83" class="test2">Tab' + counter + '</span><button type="button" class="close">&times;</button></a></li>');
       } else {
         alert("Only 3 Tabs Allowed!")
       }
     }
   });