JavaScript If语句在IE中不起作用

Question

我有以下代码,它在firefox和chrome中运行良好,但在Internet Explorer中无效...

$("#nav-tabs").on("click", "a", function(e) {
    e.preventDefault();
    $(this).tab('show');
    $('li#test').each(function() {
        if($(this).attr('class') == "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的条件语句有问题???

这是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标签是动态添加的......

Answer 1

取决于实际的html,但hasClass在检测元素是否具有给定类时应始终使用

所以改变if到

if($(this).hasClass("active")

如果元素具有类,active并且不仅class属性的值恰好是值"active",那么这将是真的

例如,如果你有

<img class=" active image" />

那hasClass("active")将是真的,但你的测试将是错误的甚至是

<img class=" active " />

由于活动周围的空白,可能会在不同的浏览器中区别对待

根据评论编辑

你几乎不应该单独依赖元素的位置.你应该依赖职位的唯一情况是当自己的位置是关键时.例如当斑马着色一张桌子

我建议您将代码更改为以下内容

$("#nav-tabs").on("click", "a", function(e) {
    e.preventDefault();
    $(this).tab('show');
    $('li#test').each(function() {
        var self = $(this), 
        source = self.hasClass("active") ? 
                      "assets/img/button_home_selected3.png") :
                      "assets/img/button_home_plain.png";
        self.children().
            .find(img:first).attr("src", source);
    });
});

有几点值得注意.

• 当你多次使用$(this)时.将其存储在局部变量中,而不是多次选择它
• 使用更具体的选择器,而不是仅依赖于找到元素的顺序
• 缩小选区以仅在更改HTML时选择所需的元素.在您的情况下,将另一个图像作为一个大孩子添加到li#test将导致代码同时更改src两个图像
• 如果使用不同的参数执行两次相同的操作,请使用if选择输入并仅实现一次功能,因为这样可以更容易地读取代码并更容易维护.如果你的情况下,这将是选择基于活动类是否存在于图像的来源,然后设置src相应的