2

我在使用 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/

4

5 回答 5

7

你的标记是从 1 开始的数字，你在 arrowRight 上得到了正确的结果，但在左边你必须做

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

注意+ 1

于 2013-06-16T14:11:34.893 回答
1

这是一种替代解决方案，它避免了计算元素，还绑定了一个处理双向移动的函数。

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>
于 2013-06-16T14:37:13.523 回答
0

我想为什么要把简单的逻辑复杂化？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');
            }
        });

    });
于 2013-06-16T14:22:23.190 回答
0

你也可以让它这样工作 -

$(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/

于 2013-06-16T14:16:37.203 回答
0

我认为您应该重构一下您的逻辑，使其更简单且可重用：

  1. 缓存点以避免每次单击箭头时进行新的查询。
  2. 使用活动元素而不是其索引缓存查询。
  3. 对左右箭头使用相同的功能以保持DRY。
  4. 为“下一步是什么？”使用 jQuery 函数和特殊选择器。逻辑： 
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>

在这个小提琴上看到它的实际效果

于 2013-06-16T14:44:21.043 回答