Question

我有一个元素列表，我希望借助箭头切换一个类。两个项目应始终具有“活动”类。单击“下一步”箭头将导致两个下一项使类“活动”，即当前两个项目将删除该类。单击“上一个”箭头将导致前两个项目使“活动”类成为当前状态，并且当前的项目将删除该类。

目前我可以使用“下一个”箭头来处理它，即类别会相应地添加。但是，“之前的”箭头无法正常工作。根本没有删除第一个项目的类。 See my fiddle.

代码：

$('.quote:first-of-type').addClass('active');
$('.quote:nth-of-type(2)').addClass('active');


$('.arrow-right').click(function() {
    $('.active').removeClass(function(){
    if($(this).is('li:last-of-type') ) {
        $('.quote:first-of-type').addClass('active');
        $('.quote:nth-of-type(2)').addClass('active');
        $(this).removeClass('active');
    } else {
        $(this).nextAll("li:lt(2)").addClass('active');
        return 'active';
    }
    })
});

$('.arrow-left').click(function() {
    $('.active').removeClass(function(){
        if($(this).is('li:first-of-type')) {                
            $('.quote:last-of-type').addClass('active');
            $('.quote:nth-last-of-type(2)').addClass('active');
            $(this).removeClass('active');

        } else {
            $(this).prevAll("li:lt(2)").addClass('active');
            return 'active';
        }
    })
});

Answer 1

更新 .arrow-left 课程点击

现场演示 Here

$('.arrow-left').click(function() {
        $('.active').removeClass(function(){
            if(($(this).is('li:first-of-type')) || ($(this).is('li:nth-of-type(2)')) )   {              
                $('.quote:last-of-type').addClass('active');
                $('.quote:nth-last-of-type(2)').addClass('active');
                //$(this).removeClass('active');
                $('.quote:first-of-type').removeClass('active');
                $('.quote:nth-of-type(2)').removeClass('active');
            } else {
                $(this).prevAll("li:lt(2)").addClass('active');
        $('.quote:last-of-type').removeClass('active');
                $('.quote:nth-last-of-type(2)').removeClass('active');
                return 'active';
            }
        })
    });

Answer 2

我发现你的方法很有趣，它让我深入了解了一些我不知道的jquery选择器。我认为您的问题可能是因为您正在通过removeClass函数修改基础数据结构。第一次调用它时，它会删除一个活动类，以便第二次调用它（在第二个活动元素上），它从第一次开始处理不同的数据。所以选择器first-of-type很可能两次匹配。

一个很好的方法可能是通过以下方式在附加到基础列表的类上引入更多不变性：

提取活动项目的索引
通过使用jquery选择器遍历列表，在不修改DOM的情况下，了解应该是下一组活动元素的逻辑
一次性删除所有活动课程
使用新类

这是一个与你分道扬琴的小提琴，表明在行动中：

https://jsfiddle.net/wpv10j12/

以下是显示步骤1-4的关键代码。它比小提琴中的简洁版本更加冗长：

$('.arrow-right').click(function() {
    // 1. Extract the index of the first active item
    var active = $(".quote").index($(".active").eq(0));

    // 2. Do the logic. Check we're not at the end and if not get the index
    // of the element we want to set to active by jumping 2 forwards.
    var end = $(".quote").length - 2;
    if (active < end) {
        var next = active + 2;
        // 3. Remove all active classes
        $(".active").toggleClass("active");
        // 4. Add the new ones in one go.
        $(".quote").eq(next).addClass("active").next().addClass("active");
    }
});

Answer 3

我看到你将类选择器和类型选择器混合在一起。我建议使用其中一个或另一个。除此之外，我会避免在removeClass内添加CSS类。

您可以尝试使用左键单击功能：

$('.arrow-left').click(function() {
    var firstActive = $('.active:first');
    $('.active').removeClass();
    if ($(firstActive).is('li:first-of-type')) {
      var last = $('li:last');
      $(last).addClass('active');
      $(last).prev('li').addClass('active');
    }  else {
      $(firstActive).prevAll("li:lt(2)").addClass('active');
    }
});

Jquery在前一项上切换类

3 个答案: