javascript - 添加类后再次单击并添加类

Question

正如标题所说，我想在不使用切换的情况下将类添加到 div。'

所以基本上我想在页脚中添加一个类，我可以使用以下方法实现:

$('footer').click(function(){
   $('footer').addClass('class-one');
});

但问题是我想在第一个类存在时通过再次单击再次添加一个类

然后再次添加

$('.class-one').click(function(){
     $('.class-one').addClass('class-two');
     $('.class-two').removeClass('class-one');
});

repeat this

$('.class-two').click(function(){
    $('.class-two).addClass('class-three');
    $('.class-three).removeClass('class-two);

不起作用。

有人能告诉我如何实现我的目标吗？所以我可以重复 5~9 次？

如果我的问题很难理解 我想做的是

想象一下我在点击

一个球的图片，我点击它，它变成了三 Angular 形

当我点击三 Angular 形时它变成了正方形

然后我再次点击它，它变成了一个六边形

Answer 1

将您的类放在数组 中，然后使用索引访问该类，并使用一个计数器作为我们在这种情况下的索引，我们将使用增量运算符对其进行更新。

var classes = ["class-one", "class-two"], counter = 0;
$('footer').click(function(){
    $(this).removeClass(classes[counter]).addClass(classes[counter++]);
});