Question

(New at jQuery)

Trying to write a function that moves an active class along as an arrow is clicked..

html

<div id="steps">
    <a href="#1" data-ref="dynamic-tabs slider-id">
        <div class="step step-1 active">
            <div class="step-img">
                <img width="175" height="120" src="http://site.com/img.png">
            </div>
            <div class="step-title">Schedule Online or Wave Down a Biker</div>
            <div class="step-over"></div>
         </div>
      </a>

     <a href="#2" data-ref="dynamic-tabs slider-id">
         <div class="step step-2">
             <div class="step-img">
                 <img width="175" height="120" src="http://site.com/img.png">
             </div>
             <div class="step-title">We Bike to & Clean Your Car</div>
             <div class="step-over"></div>
         </div>
     </a>

     <a href="#3" data-ref="dynamic-tabs slider-id">
         <div class="step step-3">
             <div class="step-img">
                 <img width="175" height="120" src="http://site.com/img.png">
             </div>
             <div class="step-title">Come Back to a Clean Car</div>
             <div class="step-over"></div>
         </div>
     </a>
 </div>

<div class="nav-right" data-dir="next" title="Slide right">
    <a href="#">right »</a>
</div>

jQuery I’m trying

$(".nav-right a").click(function() {
    if( $(".step-1").is('.active') ) {
      $(".step-1").removeClass("active");
      $(".step-2").addClass("active");
    }
});

$(".nav-right a").click(function() {
    if( $(".step-2").is(".active") ) {
      $(".step-2").removeClass("active");
      $(".step-3").addClass("active");
    } 
});

$(".nav-right a").click(function() {
    if( $(".step-3").is(".active") ) {
      $(".step-3").removeClass("active");
      $(".step-1").addClass("active");
    } 
});

Answer 1

The problem seems to be that you create 3 (sic!) event handlers which fire sequentially when you click the link.

1. The first handler, as step 1 is active, sets step 2 to active.
2. The second handler, as step 2 is now active, sets step 3 to active
3. The third handler, as step 3 is now active, sets step 1 to active again.

In the end, nothing has happened.

Solution: Use only one event handler, and if-else-statements instead of only if-statements:

$(".nav-right a").click(function() {
    if( $(".step-1").is('.active') ) {
      $(".step-1").removeClass("active");
      $(".step-2").addClass("active");
    } else if( $(".step-2").is(".active") ) {
      $(".step-2").removeClass("active");
      $(".step-3").addClass("active");
    } else if( $(".step-3").is(".active") ) {
      $(".step-3").removeClass("active");
      $(".step-1").addClass("active");
    } 
});

Of course, we can do much better and write a generic function, which also does not need the step-N classes:

var rotatedElements = $(".step");
$(".nav-right a").click(function() {
    var cur = rotatedElements.filter(".active");
    cur.removeClass("active");
    var index = rotatedElements.index(cur) + 1;
    if (index >= rotatedElements.length)
        index = 0;
    rotatedElements.eq(index).addClass("active");
});