Question

I have the following HTML:

<div id="wrapper">
      <div class="p1">
          <a href="#" class="quickFlipCta"><img src="Test Pictures/QuestionMark.gif" /></a>
      </div>

      <div class="p2">
          <a href="#" class="quickFlipCta"><img src="Test Pictures/flower.gif" /></a>
      </div>
</div>

Along with some other things, I want the class “quickFlipCta” to be removed after a certain condition. Here is a snippet of my code:

if ( $(this).attr('id') != last.attr('id') ) {
  var that = this;
  var that2 = last;
  setTimeout(function(){
     $(that).parent().parent().quickFlipper({refresh :1}); 
     $(that2).parent().parent().quickFlipper({refresh :1}); 
  }, 1500);
  $('a').removeClass('quickFlipCta');
}

The first statements work perfectly:

    setTimeout(function(){
        $(that).parent().parent().quickFlipper({refresh :1});
        $(that2).parent().parent().quickFlipper({refresh :1});
    }, 1500);

However $('a').removeClass('quickFlipCta'); does not work.
I figured there was something wrong with it but I tried it outside of the if statement and it worked. Any idea of what could be causing this? Thanks in advance.

Answer 1

Variable last has only value null, or $(this)

$('a').click(function() {
    if (last) {
        // ...
        // if this if is executed that means last = $(this), 
        // so the condition returns false
        if ($(this).attr('id') != last.attr('id')) {
            // this code is never executed
            $('a').removeClass('quickFlipCta');
        }
        // ...
        last = null;
    } else {
        last = $(this);
    }
});