当另一个元素上发生事件时从一个元素中删除更改？答案

【问题标题】：Remove changes from one element when event occurs on another element?当另一个元素上发生事件时从一个元素中删除更改？
【发布时间】：2016-06-10 08:14:43
【问题描述】：

在此程序中，单击任何框都会更改其颜色。但是我希望在单击一个框时，它的颜色会发生变化，但在单击另一个框时，它的颜色应该会改变，但第一个框的颜色应该消失（即返回原始状态）。

从更广泛的角度来看，一旦事件发生在另一个元素上，我如何将一个元素返回到其原始状态。（就像我们在 css 中添加 :hover 效果时发生的情况一样，当我们从中移除鼠标时元素会恢复到原来的状态）

编辑 - 在我的原始项目中，我有很多具有类似点击效果的 div。我想要一种通用方法，即一个元素上的事件会导致从所有其他元素中删除所有更改。

var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
div1.addEventListener("click", function() {this.style.backgroundColor="red";});
div2.addEventListener("click", function() {this.style.backgroundColor="red";});

div {
  width: 100px;
  height: 100px;
  margin: 10px;
  border: 1px solid black;
}

<html>
  <body>
    <div id="div1"></div>
    <div id="div2"></div>    
  </body>
</html>

【问题讨论】：

标签： javascript html css

【解决方案1】：

无论如何都要给 DIVS 一个类

纯 JS

window.onload = function() {
  [].map.call(document.querySelectorAll('.toggle'), function(el) {
    el.onclick = function() { // attach the handler
      [].map.call(document.querySelectorAll('.toggle'), function(el) {
        el.classList.remove('active'); // remove from all
      });
      this.classList.add('active'); // add on current
    }
  });
}

div {
  width: 100px;
  height: 100px;
  margin: 10px;
  border: 1px solid black;
}
.active {
  background-color: red
}

<html>

<body>
  <div class="toggle" id="div1"></div>
  <div class="toggle" id="div2"></div>
</body>

</html>

jQuery 如果你想试试的话：

$(function() {
  $('.toggle').on("click",function() {
    $('.toggle').removeClass("active"); // could add .not(this) here
    $(this).addClass("active");
  });
});

div {
  width: 100px;
  height: 100px;
  margin: 10px;
  border: 1px solid black;
}
.active {
  background-color: red
}

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

<body>
  <div class="toggle" id="div1"></div>
  <div class="toggle" id="div2"></div>
</body>

</html>

【讨论】：

智能有效的方法。 +1
我试图了解您的解决方案（我是初学者，不太了解），您是否已从所有元素中删除 .added 类并仅添加到单击的一个元素中？
我首先从所有元素中删除活动，然后在单击时添加

【解决方案2】：

您只需要存储divs 背景颜色的初始值：

var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var div1OriginalColour = div1.style.backgroundColor;
var div2OriginalColour = div1.style.backgroundColor;

div1.addEventListener("click", function() {
    div2.style.backgroundColor = div2OriginalColour;

    this.style.backgroundColor = "red";
});

div2.addEventListener("click", function() {
    div1.style.backgroundColor = div1OriginalColour;

    this.style.backgroundColor = "red";
});

Demo

【讨论】：

【解决方案3】：

使另一个 div 样式为 null..

var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
div1.addEventListener("click", function() {this.style.backgroundColor="red"; div2.style.background = null;});
div2.addEventListener("click", function() {this.style.backgroundColor="red"; div1.style.background = null; });

div {
  width: 100px;
  height: 100px;
  margin: 10px;
  border: 1px solid black;
}

<html>
  <body>
    <div id="div1"></div>
    <div id="div2"></div>    
  </body>
</html>

【讨论】：