添加 class 后再次单击并添加 class

Question

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

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

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

但问题是我想在 class-one 存在

时再次单击以再次添加 class

然后再次添加

$('.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次吗？

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

假设我正在点击

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

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

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

Answer 1

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

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

Answer 2

看看这个：

例如：

$('.one').click(function(e)
{
    $(e.currentTarget).removeClass('one');
    $(e.currentTarget).addClass('two');
});

参考：http://jsfiddle.net/3uz03b5r/

您的代码：

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

Answer 3

Fiddle Demo

试试这个

Html

<div class = "set0">Test<div>

Jquery

var i = 0;
$('.set'+i).on('click',function(){
    $(this).removeClass('set'+i);
    i++;
   $(this).addClass('set'+i);
});

Answer 4

试试这个..

<div id="facts">
<p>(click me):</p>
<input type="hidden" class="old" value="0"/>
  <div class="class-1"><div>
</div>
<script>
$(document).ready(function() {
    var current = 1;
    $('#facts').click(function() {
     var old= $(".old").val();
      var newvalue= parseInt(current)+parseInt(old); 
$(".old").val(newvalue);      
    $('.class-'+old).addClass('class-'+newvalue);
   $('.class-'+newvalue).removeClass('class-'+old);

    });
});
</script>

添加 class 后再次单击并添加 class

click and addclass again after class has been added

html

javascript

css

jquery