來自queryselector和eventlistener問題的數組問題

Question

面對我無法理解如何使用元素語句進行管理的事情，如使用事件偵聽器切換類。下面的代碼顯示了帶有click事件的按鈕，它添加了類，如果其他人有這個類，它將它刪除。但是每次最後一個按鈕都不會對該事件做出反應。任何人都可以解釋爲什麼以及如何處理它？

let buttons = document.querySelectorAll('button'); 
 
Array.from(buttons).forEach(function(el, i){ 
 
\t el.addEventListener('click', function(){ 
 
\t \t 
 
\t \t for(let val of buttons) { 
 
\t \t \t console.log(val) 
 
\t \t \t if(val.classList.contains('red')){ 
 
\t \t  \t \t val.classList.remove('red'); 
 
\t \t \t } else { 
 
\t \t  \t \t el.classList.add('red'); 
 
\t \t  } 
 
\t \t } \t \t 
 
\t }) 
 
})

.red { 
 
\t color: red; 
 
}

<button>button 1</button> 
 
<button>button 2</button> 
 
<button>button 3</button>

，並有更好的方式來處理這個班通過純JS切換？

Answer 1

你做了一些錯誤，在你的if-else語句代碼：

在這裏，我糾正：

let buttons = document.querySelectorAll('button'); 
 
Array.from(buttons).forEach(function(el, i){ 
 
\t el.addEventListener('click', function(){ 
 
\t \t 
 
\t \t for(let val of buttons) { 
 
\t \t \t if(val.classList.contains('red')){ 
 
\t \t  \t \t val.classList.remove('red'); 
 
\t \t \t } 
 
       el.classList.add('red'); 
 
\t \t   console.log(val) 
 
\t \t } \t \t 
 
\t }) 
 
})

.red { 
 
\t color: red; 
 
}

<button>button 1</button> 
 
<button>button 2</button> 
 
<button>button 3</button>

希望，它會爲你工作。謝謝

Answer 2

因此，你不想將紅色類添加到你點擊的類中並從其他所有類中刪除它？

const buttons = document.querySelectorAll('button'); 
 

 
Array.from(buttons).forEach(function(x){ 
 
\t x.addEventListener('click', function(b){ \t \t 
 
\t \t unsetRed(); 
 
\t \t b.srcElement.classList.add('red'); 
 
\t }) 
 
}) 
 

 
function unsetRed(){ 
 
\t [].forEach.call(document.querySelectorAll('button.red'), function(x) { 
 
\t \t x.classList.remove('red'); 
 
\t }); 
 
}

.red { 
 
    color:red; 
 
}

<button>Button</button> 
 
<button>Button</button> 
 
<button>Button</button>

Answer 3

所以首先是想說明，你有一點點縮短了代碼。它不完全是你想要的（將在下一個片段中顯示）。但它所做的幾乎是你想要的。點擊它將紅色班級切換。缺少的部分是，它不會切換所有其他按鈕。

let buttons = document.querySelectorAll('button'); 
 
buttons.forEach(function(element){ 
 
\t element.addEventListener('click', function(){ 
 
    \t \t if(element.classList.contains('red')){ 
 
\t \t  \t \t element.classList.remove('red'); 
 
\t \t \t } else { 
 
\t \t  \t \t element.classList.add('red'); 
 
\t \t } 
 
\t }); 
 
});

.red { 
 
\t color: red; 
 
}

<button>button 1</button> 
 
<button>button 2</button> 
 
<button>button 3</button>

所以一些解釋將在代碼中找到。但首先。切勿切換像red這樣的課程，但切換類似active的課程。爲什麼？因爲如果你的客戶想要把它改成綠色，你只需要改變你的CSS而不是JS。如果您將代碼與上面的代碼進行比較，則沒有太大區別。除了在添加正在移除所有活動類的類活動之前，我們會做更多的工作。

這只是給你一個想法如何handle和fire事件。你可以做更多的事情。就像傳遞論據，元素或你需要的東西一樣。爲了獲得和正確的東西反應...

let buttons = document.querySelectorAll('button'); 
 
buttons.forEach(function(element){ 
 
    element.addEventListener('click', function(){ 
 
     if(element.classList.contains('active')){ 
 
      element.classList.remove('active'); 
 
     } else { 
 
      // this is like: "Fire event on the document" 
 
      document.dispatchEvent(new CustomEvent('toggle-all-my-buttons', {})); 
 
      element.classList.add('active'); 
 
     } 
 
    }); 
 
}); 
 

 
// here we listen on the document and can react if it gets fired no matter from where 
 
document.addEventListener('toggle-all-my-buttons', function(){ 
 
    console.log('toggle all my buttons'); 
 
    buttons.forEach(function(element){ 
 
     element.classList.remove('active'); 
 
    }); 
 
});

.active { 
 
    color: red; 
 
}

<button>button 1</button> 
 
<button>button 2</button> 
 
<button>button 3</button>

Read more about CustomEvents here