在此程序中，单击任何框都会更改其颜色。但是，我希望单击一个框时，其颜色会发生变化，但单击另一个框时，其颜色应发生变化，但第一个框的颜色应消失(即返回到原始状态)。
从更广泛的 Angular 来看，一旦另一个元素上发生事件，如何将一个元素返回到其原始状态。 (就像我们在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>最佳答案
无论如何，给 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>关于javascript - 当事件发生在另一个元素上时删除一个元素的更改？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37743229/