Question

我使用html和jquery创建了一个简单的滑块，当页面上只有一个时它可以很好地工作，但是当添加更多它们时，它们会混合在一起。在页面上它看起来像这样：

$('.shop-klik').click(function(){
        $('.shop-list').animate({
            top: "-=228"
        }, 2000, function(){
            $('.shop-list').css('top', 0);
            $(".shop-list li:first-child").each(function(){
                $(this).appendTo($(this).parent());
            });
        }); 
    });

脚本：

AnimateWithTextures

.shop-klik是此滑块外的按钮。动画工作正常，但排序元素有问题。我知道它为什么不能按照我的意愿工作（当有两个滑块时它会附加两次，当有三次 - 三次，等等），但我真的不知道怎么做强迫它只做一次。我的主要目标是限制appendTo每次点击只执行一次。

Answer 1

这应该也可以，但更快：

var flag = true;
$('.shop-klik').click(function () {
    var $shopList = $(".shop-list");
    flag = true;

    $shopList.animate({top: "-=228"}, 500, function () {
        $shopList.css('top', 0);
        if (flag) {
            $shopList.find("li:first-child").each(function () {
                this.parentNode.appendChild(this);
                flag = false;
            });
        }
    });
});

尝试存储jQuery objects而不是创建相同的（更快）。
对于许多任务（例如appending一个元素到另一个元素），您也可以使用vanilla JS（通常会更快）。

在简单的jQuery滑块中排序项的问题

1 个答案: