jquery - 单击时从其他 div 中删除类并切换类

Question

我点击了多个div，我想添加类“active”，当我单击另一个div时，我希望它将类“active”添加到我刚刚单击的div，并从上一个div中删除类“active”分区我这个工作得很好。

如果我单击当前事件的 div(即切换类)，我还需要能够删除“事件”类。我尝试将toggleClass 合并到我的jquery 中，但它不起作用。有什么想法吗？

这是我的js

$('.myDiv').click(function(){
    $('.myDiv.active').removeClass('active').addClass('not-active');
    $(this).removeClass('not-active').addClass('active'); 
})

这是一个工作 fiddle :https://jsfiddle.net/alexgomy/tfucru6z/3/

Answer 1

你可以使用这个:

$(function() {
  $('.myDiv').click(function() { // when a .myDiv is clicked
    $('.myDiv').not(this).removeClass('active')
    $(this).toggleClass('active')
  })
})

$(function() {
  $('.myDiv').click(function() { // when a .myDiv is clicked
    $('.myDiv').not(this).removeClass('active')
    $(this).toggleClass('active')
  })
})

.myDiv {
  width: 100px;
  height: 100px;
  margin: 10px;
  float: left;
  border: 1px solid black;
  text-align: center;
  padding: 30px;
}

.active {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myDiv">Once i have active class if you click me i should remove active class</div>
<div class="myDiv">Once i have active class if you click me i should remove active class</div>
<div class="myDiv">Once i have active class if you click me i should remove active class</div>
<div class="myDiv">Once i have active class if you click me i should remove active class</div>
<div class="myDiv">Once i have active class if you click me i should remove active class</div>

它的工作原理是首先从除被单击的 div 之外的所有 div 中删除事件类，然后在该 div 上 ($(this)) 切换该类。