如果类也是类那么..。单击移动活动类

Question

(新设于jQuery)

试图编写一个在单击箭头时移动活动类的函数。

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我在尝试

$(".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

问题似乎是你创建了3(原文如此！)事件处理程序，当您单击链接时，事件处理程序会依次触发。

1. 第一个处理程序(步骤1是活动的)将步骤2设置为active。
2. 第二个处理程序(步骤2现在处于活动状态)将步骤3设置为active。
3. 第三个处理程序(步骤3现在处于活动状态)再次将步骤1设置为active。

最后，什么也没有发生。

解决方案:只使用一个事件处理程序，if-else语句而不是只使用if-语句：

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

当然，我们可以做得更好，编写一个泛型函数，它也不需要step-N类：

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

Answer 2

正如theScientist注释中所建议的那样，您应该只使用一个事件处理程序。

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

Answer 3

在这里，它位于一个处理程序中，并且尽可能简洁：

$(".nav-right a").click(function() {
    var $steps = $(".step"),
        index = $steps.filter('.active').removeClass("active").index();
    $steps.eq((index + 1) % $steps.length).addClass('active');
});