不带JQuery ()按顺序运行.delay函数

Question

我正在制作一个图像幻灯片，其中3个图像的CSS类切换了.onClick()以使其旋转位置。

.flip-1 becomes .flip-2 
.flip-2 becomes .flip-3
.flip-3 becomes .flip-1

问题：我的JQuery运行得太快了，我认为是递归的，所以每个映像都以元素检查中的.-1类结束。

我的JQuery是：

        $(document).ready(function () {
          $('.ebook--flip').click(function() {
              $('.flip-1').removeClass('flip-1').addClass('flip-2');
              $('.flip-2').removeClass('flip-2').addClass('flip-3');
              $('.flip-3').removeClass('flip-3').addClass('flip-1');
          });
    });

我在谷歌上搜索，认为我可以使用延迟，但是是否有一种方法可以按顺序运行remove/add类函数并在最后停止呢？

每次点击一次？

Answer 1

试试这个：

$(document).ready(function () {
      $('.ebook--flip').click(function() {
          var $flip1 = $('.flip-1');
          var $flip2 = $('.flip-2');
          var $flip3 = $('.flip-3');

          $flip1.removeClass('flip-1');
          $flip2.removeClass('flip-2');
          $flip3.removeClass('flip-3');

          $flip1.addClass('flip-2');
          $flip2.addClass('flip-3');
          $flip3.addClass('flip-1');
      });
});

问题是，每次将类更改为映像时，都会影响代码的下一行。

例如：

1. 翻转-1更改为翻转-2
2. $('flip-2')捕获以前的翻转-1和原来的翻转-2，并将它们更改为翻转-3。
3. $('flip-3')捕获了以前的触发器-1、触发器-2和flip3，并将它们改为触发器-1。

最后，您的所有图像都以应用的flip-1类结束。

希望这能有所帮助。