Question

假设我有4个盒子，用户需要选择一个。

我想将活动类应用于用户单击的框。但是，如果用户单击另一个框，我想从第一个单击框中删除该类，并将其添加到第二个单击框中。

以下代码无效 - 任何人都知道为什么？即使下面的代码按照我期望的方式运行，它仍然不会检查周围的其他框以查看它们在添加/删除之前是否具有活动类。

HTML：

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

的CSS：

.box {
  background: green;
  height: 100px;
  width: 100px;
  display: inline-block;
  padding: 10px;
  margin: 30px 50px;
}

.active {
  outline: solid 5px aqua;
}

JS：

var box = document.getElementsByClassName('box');

for(var i = 0; i < box.length; i++){
  box[i].addEventListener('click', function(){
        if(box[i].classList.contains('active')){
      box[i].classList.remove('active');
    }
    else {
      box[i].classList.add('active');
    }
  })
}

Answer 1

首先需要删除所有元素的active类，然后在循环后使用this.classList.add('active')，因为您只想在当前单击的元素上设置active类：

for(var i = 0; i < box.length; i++){
  box[i].addEventListener('click', function(){
    // remove active class for all elements
    for(var i = 0; i < box.length; i++) {
       box[i].classList.remove('active');
    }
    // add active to clicked element
    this.classList.add('active');
  });
}

Answer 2

如果你可以使用jquery，这可行：

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

.box {
  background: green;
  height: 100px;
  width: 100px;
  display: inline-block;
  padding: 10px;
  margin: 30px 50px;
}
.active {
  outline: solid 5px aqua;
}

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

Answer 3

怎么样：

$(".box").on("click", function() {
    $(".box").removeClass("active");
    $(this).addClass("active");
});

这不是纯粹的javascript，但应该做你想做的事情

根据元素是否具有该类，从元素添加/删除类

3 个答案: