Question

I have an html special character I want to toggle off and on like a check box. In this instance, it’s a star: ☆ that can become filled in: ★.

I want to check the state of the star when it is clicked.

$(".action_table_star").click(function() {
    if ($(this).html() == "★") {
        $(this).html("☆");
        $(this).css('color', 'white');
    } else {
        $(this).html("★");
        $(this).css('color', 'rgb(255,165,0)');
    }
});

This doesn’t work though because $(this).html() is never equal to “&#9733”. How can I rewrite this if statement to I guess decode the html special character and check it’s “state”?

Answer 1

Improving on SpYk3HH’s suggestion, I would approach this by adding both stars to the document, one with display:none, and use jQuery to toggle them both on click.

An additional benefit is that you can now style each star individually with CSS instead of jQuery, which is as it should be.

HTML:

<div class="action_star">
  <span class="star1">&#9733;</span>
  <span style="display:none" class="star2">&#9734;</span>
</div>

JS:

$('.action_star').click(function() {
    $(this).find('.star1,.star2').toggle();
});

http://jsfiddle.net/cfjT5/1/

Less code, more clear, more readable, much better.