JavaScript，每次將鼠標懸停在更改文本顏色
[英]JavaScript, for each hover over change the text color
問題描述
我有 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>
2 個解決方案
解決方案1
4 已采納 2022-03-01 10:13:40
你可以這樣縮短你的代碼：
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>
解決方案2
-1 2022-03-01 10:31:19
上面的代碼絕對更好。 這就是我縮短它的方式。
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>
hover上的顏色變化超過
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.