javascript - 上一项的 Jquery 切换类

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';
            }
        })
    });