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”，则为true

E.g。如果你有

<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

JavaScript If语句在IE中不起作用

1 个答案: