Changing classes in jQuery only works the first time I click

Question

To all the jQuery guru's out there I could use your help pointing out what is probably a silly error on my part. I'm trying to swap classes onclick when the user clicks on a div with the hotspot class. The code below swaps the class the first time I click but not the second and subsequent times. Also if there's a cleaner way to accomplish this please let me know.

Thanks in advance for your expertise.

jQuery:

$('.hotspot').click(function() {
    if($(this).parent().attr("class") == 'checked'){
        $(this).parent().removeClass('checked').addClass('unchecked');  
    }
    if($(this).parent().attr("class") == 'unchecked'){
        $(this).parent().removeClass('unchecked').addClass('checked');  
    } 
});

Markup:

<ul id="prettyCheck">
    <li class="checked">
          <div class="hotspot"></div>
          <div class="desc"><div class="descPad">Some text</div></div>
    </li>
    <li class="unchecked">
          <div class="hotspot"></div>
          <div class="desc"><div class="descPad">Some text</div></div>
    </li>
</ul>

Answer 1

Have you tried without chaning?

$('.hotspot').click(function() {
  if($(this).parent().attr("class") == 'checked'){
      $(this).parent().removeClass('checked');
      $(this).parent().addClass('unchecked');
  }
  if($(this).parent().attr("class") == 'unchecked'){
      $(this).parent().removeClass('unchecked');
      $(this).parent().addClass('checked');  
  } 
});

Answer 2

Instead of

$(this).parent().attr('class') == 'checked'

try

$(this).parent().hasClass('checked')

Answer 3

try this

$('.hotspot').toggle(function() {
      $(this).parent().removeClass('checked');
      $(this).parent().addClass('unchecked');
      // do more here...
  }, 
  function(){
      $(this).parent().removeClass('unchecked');
      $(this).parent().addClass('checked');  
      // do more here...
});

or

  $('.hotspot').click(function() {
      $(this).parent().toggleClass('checked');
      $('checkbox selector').attr('checked', $(this).parent().hasClass('checked'));
      // do more here...
  });

Answer 4

I think the problem is that if the class is already checked, then the first if statement will uncheck it, then the next if will re-check it. Try changing the second if to an else if and see if that fixes it for you. I did that, and also did what sberry2A suggested by replacing .attr('class') == 'checked' with .hasClass('checked'), and it's working for me.

Edit: And as for why you could only toggle each element once with your original code, it's because the test for .hasClass('checked') would only be true if the class name were exactly "checked" (and the same goes for .hasClass('unchecked') and the class name "unchecked"). jQuery's addClass() function prepends a space to the class that you give it, so that if you tell it to add the class "checked", it will add the string " checked" to the classname. Because of this, an element starting with the classname "checked" would be modified to have the class name " unchecked", and would no longer match either of your if statements, preventing it from toggling any more. That's why sberry2A suggested using hasClass(), since it will return true if the element's classname contains the class that you pass it, even if there's extra space or other classes within the classname.

Answer 5

Got it! In addition to Reigels code I can add ID's to each of my hotspots and use those for other onclick functions to do anything I need.

Thanks for the help!

Answer 6

Thanks Josh! I learn something new everyday, I couldn't figure out what I had done wrong your explanation with the spaces makes perfect sense now.