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

我正在写一个旋转木马，无法理解为什么变量会一直拉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（）幻灯片？

试试这个

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

---

在函数之外，您只分配给

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

的值和时间。

为什么要调用

cloneSlide.add（）

？这与您的问题无关。变量cloneSlide会获取DOM中的最后一张幻灯片，对其进行克隆，然后将其添加到幻灯片容器中。调用

add（）

不会改变该行为。完全没有必要。啊，对了，把它删除了，然后编辑了这个问题。