Question

所以，

if($(this).hasClass('active')){             
    $(this).removeClass('active');
    $(this).prev().addClass('active');                  
}

工作正常，它将类“active”添加到此前同类的div中。

if($(this).hasClass('active')){
    $(this).removeClass('active');
    $(this).next().addClass('active');
}

然而，将该类添加到下一个div（因为我打算这样做）大约0.5秒，然后将其删除。

这是所有的jQuery（根据你的评论） - 请不要评论我可怕的代码组织

$(window).load(function () {

    // Initial variables
    var numberSlides = 0;
    var currentSlide = 1;
    var ready = true;
    var pageWidthR = $(document).width() - 352;
    var pageWidthL = $(document).width() - 352;

    // Update number of slides by number of .slide elements
    $('#features-slider .slide').each(function () {
        numberSlides++;
    });

    // Go through each slide and move it to the left of the screen
    var i = 0;

    $($('#features-slider .slide').get().reverse()).each(function () {

        if (i == 0) {

        } else {
            var newWidth = i * 115;
            $(this).css('left', '-' + newWidth + '%');
        }

        i++;

    });

    // Animate the first slide in
    $('#features-slider .slide:last-child').addClass('active').animate({
        left: 0
    }, 1500);

    // Remove the loading message
    $('#loading').fadeOut(1000, function () {
        $('#loading').remove();

        // Now that we're done - we can show it
        $('#features-slider').show();
    });

    /***** Left and Right buttons *****/

    /* Right */
    $('#rightbutton').click(function () {

        var numberSlides = 0;
        $('#features-slider .slide').each(function () {
            numberSlides++;
        });

        var index = $('.slide.active').index() + 1;

        if (!$('.slide').is(':animated') && index != 1) {

            $('#features-slider .slide').each(function () {


                if ($(this).hasClass('active')) {

                    var currentLeft = $(this).css('left');
                    var newLeft = parseInt(currentLeft) + 115;

                } else {

                    var currentLeft = $(this).css('left');
                    var newLeft = parseInt(currentLeft) + 115;

                }


                $(this).animate({
                    left: newLeft + '%'
                }, 1500);


                if ($(this).hasClass('active')) {

                    $(this).removeClass('active');
                    $(this).prev().addClass('active');

                }

            });

        }

    });

    /* Left */
    $('#leftbutton').click(function () {

        var numberSlides = 0;
        $('#features-slider .slide').each(function () {
            numberSlides++;
        });

        var index = $('.slide.active').index() + 1;
        if (!$('.slide').is(':animated') && index != numberSlides) {

            $('#features-slider .slide').each(function () {

                if ($(this).hasClass('active')) {

                    var currentLeft = $(this).css('left');
                    var newLeft = parseInt(currentLeft) - 115;

                } else {

                    var currentLeft = $(this).css('left');
                    var newLeft = parseInt(currentLeft) - 115;

                }

                $(this).animate({
                    left: newLeft + '%'
                }, 1500);

                if ($(this).hasClass('active')) {

                    $(this).next().addClass('active');
                    $(this).removeClass('active').not($(this).next());

                }

            });

        }

    });

});

$(document).ready(function () {

    // Hide the slider and show a loading message while we do stuff and the images / DOM loads - Also disable overflow on the body so no horizontal scrollbar is shown
    $('body').css('overflow-x', 'hidden');
    $('#features-slider').hide();
    $('#loading').html('<center> <img id="loader" src="/wp-content/themes/responsive/library/images/ajax-loader.gif" /> Loading</center>');

});

分辨

新左键功能：

                                $('#leftbutton').click(function(){

                var numberSlides = 0;
                $('#features-slider .slide').each(function(){
                    numberSlides++;
                });

                var index = $('.slide.active').index()+1;

                if( !$('.slide').is(':animated') && index != numberSlides  ){

                    var done = false;               

                    $('#features-slider .slide').each(function(){

                        if($(this).hasClass('active')){

                            var currentLeft = $(this).css('left');
                            var newLeft = parseInt(currentLeft)-115;

                        } else {

                            var currentLeft = $(this).css('left');
                            var newLeft = parseInt(currentLeft)-115;

                        }

                    $(this).animate({left: newLeft+'%'}, 1500);

                    if($(this).hasClass('active') && done == false){

                            $(this).next().addClass('active');
                            $(this).removeClass('active');
                            done = true;

                    }

            });

            });

Answer 1

如果你正在迭代元素，那么应该清楚发生了什么 - 你将“活动”类添加到下一个元素，然后下一个迭代将它带走。

这只是猜测，因为你没有为我（或其他任何人）发布足够的代码以确定。

编辑 - 现在你已经更新了问题，很明显猜测是正确的。 .each()函数将向前遍历元素。当一个元素具有“active”类，并且代码将其删除并将其添加到下一个元素时，则在下一次迭代时，该工作将被撤消。

Answer 2

由于您正在引用this以及您正在描述的行为，因此您可能会迭代循环以获取元素列表。因此，您正在完成所需的操作，但下一次迭代是删除以前的更改，因为您使用了删除类，然后再添加类。

现在看来，你的代码并没有说明这种情况是如何发生的。

<强>更新如所怀疑的那样，您似乎正在循环：each(function(){。在迭代您的对象时，类正在被推进并且没有按预期运行。您正在声明将类添加到下一个元素，但是将其从当前元素中删除，并且此行为将继续进行迭代。

在旁注中，在将代码添加到下一个对象之前，请先更新代码以在当前对象上调用removeClass()：

if ($(this).hasClass('active')) {
    $(this).removeClass('active').next().addClass('active');
}

.next（）无法正常工作

2 个答案: