Question

我有这段代码：

$(document).ready(function() {
    $('#mobile-nav').click(function() {
        if($(this).html('<i class="fa fa-bars"></i>')){
            $(this).html('<i class="fa fa-times"></i>');
        } else {
            $(this).html('<i class="fa fa-bars"></i>');
        }

    });

});

当您第一次点击它时，html内容会按照我的预期发生变化，但当我再次点击时，<i class="fa fa-bars"></i>不会再次设置。

我做错了什么？

----------------------------------------------- UPDATE --------------------------------------

在阅读了这些有用的答案并将它们合并为一个之后，答案应该是这样的：

$(document).ready(function() {
    $('#mobile-nav').click(function() {
      if ($('i', this).hasClass("fa-bars")) {
          $('i', this).removeClass("fa-bars").addClass("fa-times");
      } else {
          $('i', this).removeClass("fa-times").addClass("fa-bars");
      }
    });    
});

Answer 1

不要那样检查，检查班级名称。更不用说你正在设置HTML，而不是检查它。

if ($(this).hasClass("fa-bars")) {
    $(this).removeClass("fa-bars").addClass("fa-times");
} else {
    $(this).removeClass("fa-times").addClass("fa-bars");
}

Answer 2

谓词中的这个条件：

$(this).html(...)

总是返回$(this)，这是“真实的”，所以只有分支的第一部分才被采用。

在任何情况下（没有双关语）你都不应该测试HTML的序列化版本以维持状态。您可以检查特定类（.hasClass）或使用存储在元素上的数据属性（.data），或者在词法范围中绑定的变量，例如：

(function() {
    var state = false;
    $('#mobile-nav').on('click', function() {
       state = !state;
       if (state) {
           ...
       } else {
           ...
       }
    });
 })();

Answer 3

如果该类不存在，只需添加该类：

http://jsfiddle.net/x8dSP/2700/

$(document).ready(function () {
    $('#mobile-nav li').click(function () {
        if ($(this).hasClass('fa-bars')) {
            $(this).removeClass('fa-bars');
            $(this).addClass('fa-times');
        } else {
            $(this).removeClass('fa-times');
            $(this).addClass('fa-bars');
        }
    });
});

Answer 4

而不是.click()事件使用.toggle()。

简单的jQuery元素html更改

4 个答案: