不使用.delay（）

Question

我正在制作图片幻灯片，其中3张图片的CSS类已切换为.onClick（），以便它们旋转位置。

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

问题：：我的JQuery运行速度太快，因此我以递归的方式考虑，因此每个图像最终都以元素检查中的类.flip-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');
          });
    });

我正在Google周围搜索，认为可以使用延迟，但是有没有一种方法可以按顺序运行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. flip-1更改为flip-2
2. $('flip-2')捕获以前的flip-1和原始的flip-2，并将它们更改为flip-3
3. $('flip-3')捕获以前的flip-1，flip-2和flip3，并将它们更改为flip-1。

最后，所有图像最终都应用了flip-1类。

希望这会有所帮助。