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

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

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以及什么时候。

Answer 2

尝试这个，

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