當另一個元素髮生事件時，從一個元素中移除更改？

在此程序中，單擊任何框都會更改其顏色。不過，我希望點擊一個框時，其顏色會發生變化，但點擊另一個框時，其顏色應該改變，但第一個框的顏色應該消失（即返回原始狀態）。當另一個元素髮生事件時，從一個元素中移除更改？

從更廣泛的角度來看，一旦事件發生在另一個元素上，我如何才能將元素返回到其原始狀態。（就像當我們添加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

當另一個元素髮生事件時，從一個元素中移除更改？

回答

相關問題