javascript - 如何重新开始循环javascript循环

Question

我不知道如何使标题更清晰，尽管问题本身对我来说似乎足够清楚。

我一直在使用这个 jQuery 插件:

http://felix-kling.de/blog/2011/04/14/jQuery-Function-Toggle-plugin/

弥补 jQuery 中已弃用并删除的切换功能。

然后我有以下功能:

<script>
$( document ).ready(function() {
    $("span.letra").funcToggle('click',     
        function() {$(this).addClass("ex1");},
        function() {$(this).removeClass("ex1").addClass("ex2")},
        function() {$(this).removeClass("ex2").addClass("ex3")},
        function() {$(this).removeClass("ex3")}
    );
});
</script>

我使用类是因为我将此逻辑应用于许多元素，尽管我只希望被单击的元素在每次单击时都经历一次循环。

每个类都会向元素添加不同的背景颜色。

现在，在元素后面有一个“全部清理”按钮，它将删除每个元素的每个类，将它们全部返回到“未单击”状态。

<script>
$( document ).ready(function() {
    $("span.limpar").click(     
        function() {$("span.letra").removeClass("ex1 ex2 ex3");}
    );
});
</script>

现在，正如您在上面看到的，这个按钮的作用是删除任何元素可能具有的每个类。

现在解决我的问题:

假设我单击一个元素两次。最后，单击的元素应用了“ex2”类。

现在假设我点击了“全部清理”按钮，激活了上面的第二个脚本。它删除了我之前通过点击应用到它的“ex2”类。

现在，如果我再次单击同一元素，该单击将像第三次单击一样进行，从而激活 funcToggle 脚本中的第三个函数。

我想要的代码不仅可以清除所有相关元素中的类，还可以重新启动 funcToggle 脚本，以便对已单击元素的任何单击都将注册为该序列中的第一次单击。

Answer 1

也许您使用 funcToggle 还有另一个原因，但对于这项特定的工作来说，它似乎更多的是一种障碍，而不是帮助。

这是另一种方法。

$('span.letra').on('click', function() {
  var $this = $(this);
  if($this.is('.ex1,.ex2,.ex3')) {
    $this.filter('.ex3').toggleClass('ex3');
    $this.filter('.ex2').toggleClass('ex2 ex3');
    $this.filter('.ex1').toggleClass('ex1 ex2');
  }else{
    $this.toggleClass('ex1');
  }
});

将状态存储在一个地方(例如元素上的一组类)通常比尝试保持多个系统同步更能保持理智。

也就是说，如果你想要减少重复，你可以这样做:

$('span.letrb').on('click', function() {
  var $this = $(this);
  var ex = (1 + parseInt($this.data('ex') || 0)) % 4;
  $this.data('ex', ex);
  $this.removeClass('ex1 ex2 ex3');
  if (ex > 0) {
    $this.addClass('ex'+ex);
  }
});

这要求您记住同时重置数据和类:

$('span.letrb').removeClass('ex1 ex2 ex3').data('ex', 0);