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

click and addclass again after class has been added

本文关键字：添加 单击      更新时间：2023-09-26

正如标题所说，我想在不使用切换的情况下将类添加到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次？

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

想象一下我点击

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

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

我再次单击它，它变成了一个六边形

将您的类放在Array中，然后使用索引访问该类，并使用计数器在本例中充当我们的索引，我们将使用增量运算符更新该计数器。

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

看看这个：

例如： 

$('.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');
});

小提琴演示

试试这个

目录

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

Jquery

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

试试这个。 

<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>
相关文章：