当另一个元素发生事件时，从一个元素中移除更改？

在此程序中，单击任何框都会更改其颜色。不过，我希望点击一个框时，其颜色会发生变化，但点击另一个框时，其颜色应该改变，但第一个框的颜色应该消失（即返回原始状态）。当另一个元素发生事件时，从一个元素中移除更改？

从更广泛的角度来看，一旦事件发生在另一个元素上，我如何才能将元素返回到其原始状态。（就像当我们添加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>

来源

2016-06-10 Dhruv Chadha

在任何情况下给的div类

平原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>

来源

2016-06-10 08:28:57 mplungjan

智能和有效的方法。 +1 – melancia

我试图理解你的解决方案（我是一个初学者，不知道多少），是否已经从所有元素中删除'.added'类，并且只添加到一个被单击的元素？ –

我首先删除所有元素的活动，然后添加点击 – mplungjan

再拍格样式空..

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>

来源

2016-06-10 08:18:40 SESN

你只需要存储的初始值两个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

来源

2016-06-10 08:21:10 melancia

当另一个元素发生事件时，从一个元素中移除更改？

回答

相关问题