如果课程也是课程然后..点击移动活动课程答案

【问题标题】：If class also is class then.. move active class on click如果课程也是课程然后..点击移动活动课程
【发布时间】：2012-12-07 02:47:06
【问题描述】：

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

【问题讨论】：

和？问题是什么？为什么同一个元素需要三个点击事件？为什么不只是一个事件处理程序并将所有逻辑放入其中。
您定义的每个后续单击事件处理程序最有可能的问题是覆盖前一个。因此，创建一个事件处理程序，而不是三个，然后编写一个 if/else if/else if 来组合您的所有逻辑。
另外，您应该确保在 document.ready() 函数中定义此事件处理程序，以使 .nav-right 元素被定义
@thescientist 你的 cmets 工作了。如果您“回答”这个问题，您将得到正确的答案。您在其他人之前发表了评论。
@Reuben 下次我会确保不会在沙发上睡着 ;)

标签： javascript jquery class if-statement

【解决方案1】：

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

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

【讨论】：

+1 我使用 index() 的通用函数沿着这条路线前进。你在我之前完成了它。这是显示您的解决方案有效的 jsfiddle：jsfiddle.net/nickadeemus2002/LZCgY/6
我挖掘通用函数！希望我能很快学会如何写这些:) 谢谢！！

【解决方案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;       
    } 
});

【讨论】：

“返回”是什么意思？做什么？
Return 只会使控制失去功能..请参阅 bergi 的回答的 3 点..以防止我只使用“return”。

【解决方案3】：

它在一个单独的处理程序中，并且尽可能简洁：

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

【讨论】：

【解决方案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');
});

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

【讨论】：