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

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...
  });