遇到jQuery removeClass的问题

Question

我遇到了jQuery .removeClass

的问题

我认为我不需要解释很多因为jsFiddle会做的。 但为什么不能保持性能？当你看到红色正确传递时，右边工作正常。但是左边是跳一个，不会标记最后一个。

    $(document).ready(function() { 
      var currentDiv = 0;
    $('#arrowRight').click(function() {
        currentDiv = (currentDiv + 1) % 5;
        $('.dot').removeClass('active');
        $('.mark' + (currentDiv + 1)).addClass('active');
    }); 

    $('#arrowLeft').click(function() {
        currentDiv = currentDiv - 1;
        if (currentDiv < 0)
            currentDiv = 4;
        $('.dot').removeClass('active');
        $('.mark' + (currentDiv)).addClass('active');
    });

    });

http://jsfiddle.net/hmDg8/

Answer 1

你的分数是从1开始的数字，你在arrowRight上是正确的，但在左边你必须这样做

$('.mark' + (currentDiv + 1)).addClass('active');

请注意+ 1

Answer 2

这是一个替代解决方案，可以避免计算元素，也可以绑定一个处理向两个方向移动的函数。

<强>的JavaScript

var $dots = $('.dot');

$('a').on('click', function() {
    var $current = dots.filter('.active');
    var goingRight = this.id === 'arrowRight';
    var $target = goingRight ? $current.next() : $current.prev();

    if ( !$target.length ) {
        $target = dots.filter( goingRight? ':first' : ':last' );
    }

    $current.removeClass('active');
    $target.addClass('active');

    return false;
});

<强> HTML

<a href="#" id="arrowLeft">Left</a>
<span class="dot mark1 active">Test</span>
<span class="dot mark2">Test</span>
<span class="dot mark3">Test</span>
<span class="dot mark4">Test</span>
<span class="dot mark5">Test</span>
<a href="#" id="arrowRight">Right</a>

Answer 3

你也可以这样工作 -

$(document).ready(function () {
    $('#arrowRight').click(function () {
        var active = $('.dot.active');
        if (active.next('.dot').length > 0) {
            $('.dot').removeClass('active');
            active.next('.dot').addClass('active');
        }
    });

    $('#arrowLeft').click(function () {
        var active = $('.dot.active');
        if (active.prev('.dot').length > 0) {
            $('.dot').removeClass('active');  
            active.prev('.dot').addClass('active');
        }
    });
});

演示--> http://jsfiddle.net/hmDg8/2/

Answer 4

我认为为什么简单的逻辑复杂化？ pXL答案很好，因为它是动态的，但仍然是一个简单的解决方案。

    $(document).ready(function () {
        var currentDiv = 1;
        $('#arrowRight').click(function () {
            if (currentDiv < 5) {
                currentDiv++;
                $('.dot').removeClass('active');
                $('.mark' + (currentDiv)).addClass('active');
            }
        });

        $('#arrowLeft').click(function () {
            if (currentDiv > 1) {
                currentDiv--;
                $('.dot').removeClass('active');
                $('.mark' + (currentDiv)).addClass('active');
            }
        });

    });

Answer 5

我认为你应该重构一下你的逻辑，使其变得更简单和可重复使用：

1. 缓存点以避免每次点击箭头时都进行新查询。
2. 使用活动元素而不是索引缓存查询。
3. 对左右箭头使用相同的功能来保存DRY。
4. 为“下一步是什么？”逻辑使用jQuery函数和特殊选择器：
   • $.next
   • $.prev
   • '：last'和'：first'selectors
   • $.filter

var $dots = $('.dot')
  , $current = $dots.filter('.active')
;
$('a').on('click', function() {
    var isRight = this.id === 'arrowRight';

    $current = $current[ isRight? 'next' : 'prev' ]( '.dot' );
    if ( !$current.length ) {
        $current = $dots.filter( isRight? ':first' : ':last' );
    }

    $dots.removeClass('active');
    $current.addClass('active');
    return false;
});

通过这种方式，您可以删除不需要的markX类。

<a href="#" id="arrowLeft">Left</a>
<span class="dot">Test</span>
<span class="dot active">Test</span>
<span class="dot">Test</span>
<span class="dot">Test</span>
<span class="dot">Test</span>
<a href="#" id="arrowRight">Right</a>

see it in action on this fiddle