我有 4 個div（彩色框），每個div代表不同的顏色。當用戶將滑鼠懸停在其中一個彩色框上時，要顯示的文本（“Hello world”）應更改為懸停在其上的顏色。我為每種顏色撰寫了代碼，但它看起來很破舊，因為我為每種顏色復制了很多次代碼。如何使這段代碼更短、更高效？
document.addEventListener('DOMContentLoaded', function() {
const textToChange = document.getElementById('change_heading');
const brownColor = document.querySelector('.brown');
const greenColor = document.querySelector('.green');
const blueColor = document.querySelector('.blue');
brownColor.addEventListener('mouseover', function() {
textToChange.classList.add('brown');
});
brownColor.addEventListener('mouseout', function() {
textToChange.classList.remove('brown');
});
greenColor.addEventListener('mouseover', function() {
textToChange.classList.add('green');
});
greenColor.addEventListener('mouseout', function() {
textToChange.classList.remove('green');
});
blueColor.addEventListener('mouseover', function() {
textToChange.classList.add('blue');
});
blueColor.addEventListener('mouseout', function() {
textToChange.classList.remove('blue');
});
});div {
width: 50px;
height: 50px;
display: inline-block;
}
.brown {
background-color: brown;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
}<h1 id="change_heading">Hello World</h1>
SELECTED COLOR <span class="selected">None!</span>
<section>
<div class="brown"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="yellow"></div>
</section>uj5u.com熱心網友回復：
你可以這樣縮短你的代碼：
document.addEventListener('DOMContentLoaded', function() {
const textToChange = document.getElementById('change_heading');
const corloredDivs = document.querySelectorAll('section div');
corloredDivs.forEach(d=>{
d.addEventListener('mouseover', function() {
textToChange.classList.add(d.classList[0]);
});
d.addEventListener('mouseout', function() {
textToChange.classList.remove(d.classList[0]);
});
});
});div {
width: 50px;
height: 50px;
display: inline-block;
}
.brown {
background-color: brown;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
}<h1 id="change_heading">Hello World</h1>
SELECTED COLOR <span class="selected">None!</span>
<section>
<div class="brown"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="yellow"></div>
</section>uj5u.com熱心網友回復：
上面的代碼絕對更好。這就是我縮短它的方式。
document.addEventListener('DOMContentLoaded', function () {
const textToChange=document.getElementById('change_heading');
let allDivs = document.getElementsByClassName('a');
for (const div in allDivs) {
let currentClassName = allDivs[div].className.split(" ")[1];
allDivs[div].addEventListener('mouseover', function(){
textToChange.classList.add(currentClassName);
});
allDivs[div].addEventListener('mouseout', function(){
textToChange.classList.remove(currentClassName);
});
}
}); div {
width: 50px;
height: 50px;
display: inline-block;
}
.brown {
background-color: brown;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
}<body>
<h1 id="change_heading">Hello World</h1>
SELECTED COLOR <span class="selected">None!</span>
<section>
<div class="a brown"></div>
<div class="a green"></div>
<div class="a blue"></div>
<div class="a yellow"></div>
</section>
<script src="script.js"></script>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/435024.html
標籤：javascript html css 添加事件监听器
上一篇：Vue中的抖動效果