单击时从其他div中删除类,也切换类

Question

我点击了多个div我想添加类'active'当我点击另一个div时我想让它将div'活动'添加到我刚刚点击的div中,并从前一个div中删除类'active'.我的工作正常.

如果我点击当前活动的div即toggleclass,我还需要能够删除类'active'.我试图将toggleClass包含到我的jquery中,但它不起作用.有任何想法吗？

这是我的js

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

这是一个工作小提琴: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中删除,然后在那一个($(this))上切换该类.