0

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

4 回答 4

3

问题似乎是您创建了 3 个（原文如此！）事件处理程序，当您单击链接时会按顺序触发。

  1. 当步骤 1 处于活动状态时，第一个处理程序将步骤 2 设置为活动状态。
  2. 第二个处理程序，因为第 2 步现在处于活动状态，所以将第 3 步设置为活动
  3. 第三个处理程序，因为第 3 步现在处于活动状态，所以将第 1 步再次设置为活动。

最后，什么都没有发生。

解决方案：仅使用一个事件处理程序和 if-else-statements 而不是仅使用 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");
    } 
});

当然，我们可以做得更好，写一个通用函数，它也不需要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");
});
于 2012-12-07T03:05:43.573 回答
1

正如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;       
    } 
});
于 2012-12-07T03:07:05.893 回答
1

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

$(".nav-right a").click(function() {
    var $steps = $(".step"),
        index = $steps.filter('.active').removeClass("active").index();
    $steps.eq((index + 1) % $steps.length).addClass('active');
});
于 2012-12-07T03:21:41.217 回答
0

这里有几个问题，但要解决这个问题，您可以将代码简化为此并删除对 .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');
});

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

于 2012-12-07T03:16:37.050 回答