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次？

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

想象一下我点击

球的图片，我点击它，使其变成三角形

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

然后我再次点击它变成六边形

Answer 1

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

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>

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

4 个答案: