javascript - 如果类(class)也是类(class)，那么..单击时移动事件类(class)

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 设置为事件状态。
2. 第二个处理程序，由于步骤 2 现在处于事件状态，因此将步骤 3 设置为事件状态
3. 第三个处理程序，由于步骤 3 现在处于事件状态，因此将步骤 1 再次设置为事件状态。

最后什么也没发生。

解决方案:仅使用一个事件处理程序，并使用 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");
});