Question

我试图使用jQuery向元素添加一个类。如果用户单击一个元素，它会添加一个类，我可以这样做，但是我只希望该类的一个实例处于活动状态，因此如果用户点击其他类，那么该类将从前一个元素中删除并添加到现在的。

class Program {
    static void Main(string[] args) {
        const int steps = 10000;
        Stopwatch sw = new Stopwatch();

        ArrayList list1 = new ArrayList();
        sw.Start();
        for(int i = 0; i < steps; i++) {
            list1.Add(i);
        }
        sw.Stop();
        Console.WriteLine("ArrayList:\tMilliseconds = {0},\tTicks = {1}", sw.ElapsedMilliseconds, sw.ElapsedTicks);

        MyList list2 = new MyList();
        sw.Start();
        for(int i = 0; i < steps; i++) {
            list2.Add(i);
        }
        sw.Stop();
        Console.WriteLine("MyList:  \tMilliseconds = {0},\tTicks = {1}", sw.ElapsedMilliseconds, sw.ElapsedTicks);

Answer 1

首先从所有.added元素中删除.box类，然后将其添加到使用this点击的元素：

 $('.box').click(function() {
     $('.box').removeClass('added');
     $(this).addClass('added');
 });

 $('.box').click(function() {
   $('.box').removeClass('added');
   $(this).addClass('added');
 });

.col {
  width: 25%;
  float: left;
}
.box {
  width: 50px;
  height: 50px;
  background-color: red;
  cursor: pointer;
}
.added {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
  <div class="col">
    <div class="box">

    </div>
  </div>
  <div class="col">
    <div class="box">

    </div>
  </div>
  <div class="col">
    <div class="box">

    </div>
  </div>
  <div class="col">
    <div class="box">

    </div>
  </div>
</div>

Answer 2

$('.added').removeClass('added');

在所有事情发生之前，在你的点击事件中

。

Answer 3

只需将其添加到click事件的开头：

jQuery(".added").each(function(i,el){
    jQuery(el).removeClass("added")
});

这将删除该类的所有实例，因此当您添加一个新实例时，那将是唯一的。

Answer 4

试试这个

$('.box').click(function(){
 $('.box').removeClass('added');
 $(this).addClass('added');
})

仅添加一个类的单个实例

4 个答案: