在此程序中,单击任何框可更改其颜色。但是我希望在单击一个框时,它的颜色会发生变化,但是在单击另一个框时,它的颜色应该会改变,但第一个框的颜色应该会消失(即返回原始状态)。
从更广泛的角度来看,一旦事件发生在另一个元素上,我怎样才能将元素返回到其原始状态。 (就像我们在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>
&#13;
答案 0 :(得分:4)
无论如何给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
}
});
}
&#13;
div {
width: 100px;
height: 100px;
margin: 10px;
border: 1px solid black;
}
.active {
background-color: red
}
&#13;
<html>
<body>
<div class="toggle" id="div1"></div>
<div class="toggle" id="div2"></div>
</body>
</html>
&#13;
jQuery 以防您想尝试:
$(function() {
$('.toggle').on("click",function() {
$('.toggle').removeClass("active"); // could add .not(this) here
$(this).addClass("active");
});
});
&#13;
div {
width: 100px;
height: 100px;
margin: 10px;
border: 1px solid black;
}
.active {
background-color: red
}
&#13;
<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>
&#13;
答案 1 :(得分:1)
您只需存储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";
});
答案 2 :(得分:0)
使另一个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>