仅添加 class 的单个实例

Question

我正在尝试使用 jQuery 向元素添加 class。如果用户单击一个元素，它会添加一个 class，我可以这样做，但我只希望该 class 的 1 个实例处于活动状态，因此如果用户单击其他 class ] 然后从前一个元素中删除并添加到当前元素中。

https://jsfiddle.net/gsuxjce2/3/

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

.col {
  width: 25%;
  float: left;
}

.box {
  width: 50px;
  height: 50px;
  background-color: red;
  cursor: pointer;
}

.added {
  background-color: blue;
}

 $('.box').click(function() {
        $(this).toggleClass('added');

    if ( $(this).hasClass('added'); ) {
                    $(this).removeClass('added');
    } else {
            $(this).toggleClass('added');
    }

 });

Answer 1

只需将此添加到您 click 活动的开头：

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

这会删除 class 的所有实例，这样当您添加一个新实例时，它将是独一无二的。

Answer 2

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

在一切之前在您的点击事件中。

Answer 3

首先从所有 .box 元素中删除 .added class，然后将其添加到用 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>

仅添加 class 的单个实例

Adding only a single instance of a class

javascript

jquery

html

css

addclass