javascript - 简单的 jQuery 元素 html 更改

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>时不再设置。

我做错了什么？

------------------------------------------------------------更新--------------------------------------------------

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

$(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");
}