0

我有以下代码，在 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 标签是动态添加的......

4

1 回答 1

5

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

所以将 if 更改为

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

如果元素具有类active并且不仅当class属性的值恰好是值“活动”时，这将是正确的

例如，如果你有

<img class=" active image" />

那么hasClass("active")将是正确的，但您的测试将是错误的，甚至

<img class=" active " />

由于 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相应地设置
于 2013-02-11T12:45:58.417 回答