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

Question

我有一堆 div 堆叠在一个名为：#deck 的主 div 上。如果我点击#deck，顶部的 div 将向左移动并添加一些类（例如：.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，而是想从 #deck 移动前 3 个 div。我不想将 div 移到彼此之上，而是稍微移到彼此之上。所以第一个顶部 div 必须向左移动 8rem，然后第二个顶部 div 移动到 10rem 和最后一个 12rem

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

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

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

感谢任何帮助

Answer 1

使用“触发器”解决它：$( '#deck .card.flipped' ).last().trigger("click",[2])