在javascript中添加和刪除一個類

Question

我正在嘗試編寫一個函數，當用戶單擊它時，使可視對象打開和關閉，打開和關閉。 然后在類中添加一個點擊事件監聽器，名為 button btn-sauce 。

到目前為止，我的代碼不起作用：

function renderWhiteSauce() {
  if (element.classList) {
  element.classList.toggle("btn-sauce.active");
} else {
  var classes = element.className.split(" ");
  var i = classes.indexOf("btn-sauce.active");
  if (i >= 0)
    classes.splice(i, 1);
  else
    classes.push("btn-sauce.active");
    element.className = classes.join(" ");
}

document.querySelector('.btn-sauce.active').addEventListener('click', () => {
  state.sauce = !state.sauce;
  renderEverything();
});

Answer 1

您可以使用方法 classList.add('classname') 和 classList.remove('classname') 添加和刪除類。 定義使 btn 處於活動狀態的類，只需添加或刪除它。

const elem = document.querySelector('.btn-sauce')
elem.addEventListener('click', () => { 
 if(elem.className.indexOf('className') < 0) {
   elem.classList.add('className')
 } else {
   elem.classList.remove('className')
 }  
 });

Answer 2

btn-sauce和active是兩個獨立的類，但您正在編寫代碼，就像它們是一個一樣。 刪除btn-sauce. （包括點）來自 querySelector 行上方的所有內容，您將能夠打開和關閉active類。

如果元素開始時不是“活動的”，您還應該將document.querySelector('.btn-sauce.active')更改為document.querySelector('.btn-sauce') 。

最后一點，你在呼喚renderEverything()在點擊處理，我以為是調用另一個函數renderWhiteSauce()但我想我會提到它的情況下，這只是一個錯字，他們的意思是相同的功能。