简单的jQuery元素html更改

Question

I have this code:

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

    });

});

When you first click on it, the html content changes as I expect, but when I click again the <i class="fa fa-bars"></i> are not set again.

What I'm doing wrong?

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

After reading these helpful answers and combining them into one the answer for this should be something like this:

$(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

Don't check it like that, check the class name. Not to mention you're setting the HTML, not checking it.

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

Answer 2

This condition in the predicate:

$(this).html(...)

always returns $(this) , which is "truthy", so only the first part of the branch is ever taken.

In any event (no pun intended) you should never test the serialised version of the HTML to maintain state. You could check for a specific class ( .hasClass ) or use data attributes ( .data ) stored on the element, or a variable bound in the lexical scope, eg:

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

Answer 3

Just add the class if it is not present:

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()