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个（sic！）事件处理程序，当你点击链接时它会按顺序触发。

第一个处理程序，当步骤1处于活动状态时，将步骤2设置为活动状态。
第二个处理程序，当步骤2现在处于活动状态时，将步骤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");
});

Answer 2

正如科学家在评论中建议的那样，你应该只使用一个事件处理程序。

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

Answer 4

这里有一些问题，但为了解决这个问题，你可以简化你的代码并删除对.step1，.step2等的依赖，以防你决定添加更多步骤。

$('.nav-right').find('a').on('click', function(e) {
    e.preventDefault();
    var $activeStep = $('.step.active'),
        $expectedNextStep = $activeStep.closest('a').next().find('.step'),
        $nextActiveStep = $expectedNextStep.length ? $expectedNextStep : $('.step').first();

    $activeStep.removeClass('active');
    $nextActiveStep.addClass('active');
});

然而;我强烈建议将其放在一个有序列表中，而不是将块元素包装在一个锚中。该页面将按照您的方式工作，但它的语义很差。

如果类也是类，则单击时移动活动类

4 个答案: