上一项上的 Jquery 切换类答案

【问题标题】：Jquery toggle class on previous item上一项上的 Jquery 切换类
【发布时间】：2016-11-16 21:51:44
【问题描述】：

我有一个元素列表，我想在箭头的帮助下切换一个类。两个项目应始终具有“活动”类。单击“下一个”箭头应该会导致下两个项目使类“活动”，当前的两个项目会删除该类。单击“上一个”箭头应该会导致前两个项目使类“活动”，而当前项目会删除该类。

目前我可以让它与“下一个”箭头一起工作，即相应地不断添加类。然而，“前一个”箭头不能正常工作。第一项的类根本不会被删除。 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';
        }
    })
});

【问题讨论】：

标签： javascript jquery

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

【讨论】：

你为什么在removeClass回调中这样做？恕我直言，您不必要地进行了两次活动/非活动切换。

【解决方案2】：

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

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

提取活动项目的索引
通过使用 jquery 选择器遍历列表，在不修改 DOM 的情况下，根据您的逻辑判断下一组活动元素应该是什么
一次性删除所有活动类
使用新类更新 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");
    }
});

【讨论】：

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

【讨论】：