<body>
<ul>
<li>知否知否，點我應有彈框在手！</li>
<li>知否知否，點我應有彈框在手！</li>
<li>知否知否，點我應有彈框在手！</li>
<li>知否知否，點我應有彈框在手！</li>
<li>知否知否，點我應有彈框在手！</li>
</ul>
<script>
// 事件委托的核心原理：給父節點添加偵聽器， 利用事件冒泡影響每一個子節點
var ul = document.querySelector('ul');
ul.addEventListener('click', function(e) {
// alert('知否知否，點我應有彈框在手！');
// e.target 這個可以得到我們點擊的物件
e.target.style.backgroundColor = 'pink';
})
</script>
</body>
點擊li背景顏色會變成粉紅色，但我想在下一次點擊li的時候把之前點擊過的背景顏色變回原本那樣，這個怎么實作？
uj5u.com熱心網友回復：
<script>
var ul = document.querySelector('ul');
ul.addEventListener('click', function(e) {
e.target.style.backgroundColor = e.target.style.backgroundColor=='pink'?'white':'pink';
})
</script>
uj5u.com熱心網友回復：
是不是點哪個哪個變粉，其他的變白？<body>
<ul>
<li>知否知否，點我應有彈框在手！</li>
<li>知否知否，點我應有彈框在手！</li>
<li>知否知否，點我應有彈框在手！</li>
<li>知否知否，點我應有彈框在手！</li>
<li>知否知否，點我應有彈框在手！</li>
</ul>
<script>
// 事件委托的核心原理：給父節點添加偵聽器， 利用事件冒泡影響每一個子節點
var ul = document.querySelector('ul');
var lis = document.querySelectorAll("li");
ul.addEventListener('click', function(e) {
Array.prototype.forEach.call(lis, function(value) {
if (value == e.target) {
value.style.backgroundColor = "pink";
} else {
value.style.backgroundColor = "white";
}
});
})
</script>
</body>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/47094.html
標籤：JavaScript
上一篇：嘗試去理解，有沒有什么好辦法