Question

我正在写一个旋转木马并且无法理解为什么变量不断拉动DOM的原始值，尽管DOM发生了变化：

// Slide container selector
var carouselSlides = $('#carousel_1 #carousel_slides');

// Selects last slide in the DOM
var cloneSlide = $('#carousel_slides .carousel_slide').last().clone();

// Prepend last slide to slide container
cloneSlide.prependTo(carouselSlides);

function changeSlideNext() {

    carouselSlides.animate({
        left: '-=980'
    }, 1000, 'easeOutExpo', function() {

        // Remove prepended slide
        cloneSlide.remove();

        // Move first slide to the last
        $('#carousel_slides .carousel_slide').first().appendTo(carouselSlides);
        carouselSlides.css('left','-980px');

        // Add new prepended slide when animation is complete (and DOM is updated)
        cloneSlide.add().prependTo(carouselSlides);

    });

}

上面的代码总是在原始DOM中添加最后一张幻灯片。如何在DOM更新后选择.last（）幻灯片？

Answer 1

试试这个，

function changeSlideNext() {
    carouselSlides.animate({
        left: '-=980'
    }, 1000, 'easeOutExpo', function() {
        var cloneSlide = $('#carousel_slides .carousel_slide:first').clone();

        // Remove first slide
        $('#carousel_slides .carousel_slide:first').remove();

        // Append new slide to last
        cloneSlide.appendTo(carouselSlides);    
    });    
}

Answer 2

您只能在功能之外分配cloneSlide一次。调用changeSlideNext()不会为其分配任何不同的值 - 没有理由期望它有所不同。

您需要继续选择功能中的最后一张幻灯片，例如：

carouselSlides.animate({
    left: '-=980'
}, 1000, 'easeOutExpo', function() {

    // Remove prepended slide
    cloneSlide.remove();

    // Move first slide to the last
    cloneSlide = $('#carousel_slides .carousel_slide').first().appendTo(carouselSlides);
    carouselSlides.css('left','-980px');

    // Add new prepended slide when animation is complete (and DOM is updated)
    cloneSlide.prependTo(carouselSlides);

});

我希望我能正确理解这个功能的想法。我并不完全确定cloneSlide以及何时需要哪个值。

当DOM更改时，使用最后一个选择器更新变量

2 个答案: