<div class="container">
<button id="1">first</button>
<button id="2">Second</button>
<button id="3">Third</button>
<button id="4">4th</button>
<button id="...">...</button>
<button id="n">nth</button>
</div>
<script>
var btn = document.querySelectorAll('button')
for (let i = 0; i < btn.length; i ) {
btn[i].style.border = '3px solid yellow'
if (btn[i].style.border == '3px solid yellow') {
btn[i].addEventListener('click', red)
}
else if (btn[i].style.border == '3px solid red') {
btn[i].addEventListener('click', yellow)
}
}
function red(e) {
this.style.border = '3px solid red'
}
function yellow(e) {
this.style.border = '3px solid yellow'
}
</script>
假設當用戶從串列中切換一個按鈕時，它會變成紅色，當重新切換同一個按鈕時，它會變成黃色，依此類推..
我知道這里發生了什么以及為什么它不起作用并且我有一個基于計數器（偶數或奇數）的解決方案，但我不認為這種方法是最佳的。
那么解決問題的最佳方法是什么！
uj5u.com熱心網友回復：
您可以將按鈕是否打開/關閉存盤為 DOM 元素上的自定義屬性：
var btn = document.querySelectorAll('button')
for(let i = 0; i < btn.length; i ) {
btn[i].addEventListener("click", toggleState);
}
// You could also replace the above loop with:
// btn.forEach(i => i.addEventListener("click", toggleState));
function toggleState(e)
{
e.preventDefault();
if(this.toggled)
{
this.style.border = "3px solid red";
// Do whatever else you need to do when the border turns red
}
else
{
this.style.border = "3px solid yellow";
// Do whatever else you need to do when the border turns yellow
}
this.toggled = !this.toggled;
return;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/530067.html