重复一个函数 3 次，但每次都改变 .animation

Question

我有一堆 div 堆放在一个名为 div 的主 div 上：#deck。如果我单击 #deck，顶部的 div 将向左移动并添加一些 classes（如：.addClass('on-discard-pile')）。

如果我再次单击 #deck，下一个顶部 div 将移动到前一个 div 顶部的左侧。为此，我有以下工作代码：

    var z = 1;
    $('#deck .card.flipped').on('click', function () {
        if (!$(this).hasClass('dropped')) {
            $('.card').removeClass('ui-front');
            $(this)
                .addClass('ui-front')
                .addClass('on-discard-pile')
                .addClass('dropped')
                .css({'z-index': z++})
                .animate({left: '8rem'}, 200)
                .draggable({ disabled: false})
                .removeClass('flipped');

            set(moveCount, moveCount.value + 1);

            if (!$(this).is(':first-child')) {
                $('.card').removeClass('under-card');
                $(this).next().addClass('under-card'); 
            } else {
                $('.card').removeClass('under-card');
            }
        }
    });

一切正常，但我想稍微改变一下功能。我不想移动顶部 div，而是移动顶部 3 div 从 #deck。我不想将 div 移动到彼此之上，而是稍微移动到彼此之上。所以第一个顶部 div 必须向左移动 8rem，然后是第二个顶部 div 到 10rem，最后一个 12rem

这还不是全部，最后一个 div（达到 12rem 并具有最高的 z-index）应该是唯一 div 获得 .draggable({ disabled: false})，但是（是的，另一个但是）如果我再次单击 #deck，.draggable({ disabled: false}) 应该再次被删除并添加到新的顶部 div。

所以只有 div 具有最高的 z-index 和 class on-discard-pile 应该有 .draggable({ disabled: false})

如何做到这一点？在网上搜索了一下，查看了 loop、repeat、array 和 :lt()，但得到了 none 工作。

感谢任何帮助

Answer 1

使用 "trigger" 解决了它：$( '#deck .card.flipped' ).last().trigger("click",[2])

重复一个函数 3 次，但每次都改变 .animation

Repeat a function 3 times, but each time change .animation

arrays

jquery

jquery-ui

repeat

jquery-selectors