如何根據按鈕單擊按順序添加類？

我只找到了使用 jQuery 的示例，但我想知道如何使用 Vanilla JS 根據按鈕單擊順序添加和洗掉類。我嘗試使用 forEach 但我只能一次添加所有類。

document.querySelector('#addBtn').addEventListener('click', () => {
   document.querySelectorAll('.dot').forEach(e => {
      e.classList.add('active')
   })
})

document.querySelector('#removeBtn').addEventListener('click', () => {
   document.querySelectorAll('.dot').forEach(e => {
      e.classList.remove('active')
   })
})

.dots{
   position: relative;
   display: flex;
  justify-content: space-around;
   width: 100%;
   height: 10px;
   margin-bottom: 40px;
}

.dot{
   position: relative;
   height: 10px;
   width: 100%;
   background-color: grey;
   margin: 5px;
}

.dot.active{
   background-color: red;
}

 <button type="button" id="removeBtn">Remove</button>
 <button type="button" id="addBtn">Add</button>

  <div class="dots">
    <div class="dot active"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
   </div>

uj5u.com熱心網友回復：

一旦active添加/洗掉了一個點，您就可以跳出回圈。

document.querySelector('#addBtn').addEventListener('click', () => {
  const dots = document.querySelectorAll('.dot');
  for (let dot of dots) {
    if (![...dot.classList].includes('active')) {
      dot.classList.add('active');
      break;
    }
  }
});

document.querySelector('#removeBtn').addEventListener('click', () => {
  const dots = document.querySelectorAll('.dot');
  for (let dot of [...dots].reverse()) {
    if ([...dot.classList].includes('active')) {
      dot.classList.remove('active');
      break;
    }
  }
});

.dots{
   position: relative;
   display: flex;
  justify-content: space-around;
   width: 100%;
   height: 10px;
   margin-bottom: 40px;
}

.dot{
   position: relative;
   height: 10px;
   width: 100%;
   background-color: grey;
   margin: 5px;
}

.dot.active{
   background-color: red;
}

<button type="button" id="removeBtn">Remove</button>
<button type="button" id="addBtn">Add</button>

<div class="dots">
  <div class="dot active"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

uj5u.com熱心網友回復：

請檢查下面的答案。解釋在評論中。

document.querySelector('#addBtn').addEventListener('click', () => {
  // Get active elements
  let activeEl = document.querySelectorAll('.dot.active');
  let nextActiveEl;

  // If we found active element then find the next sibling else select the first element
  if (activeEl.length > 0) {
    nextActiveEl = activeEl[activeEl.length - 1].nextElementSibling
  } else {
    nextActiveEl = document.querySelectorAll('.dot')[0];
  }

  // If selected element is not null then add class active
  if (nextActiveEl)
    nextActiveEl.classList.add('active');
})

document.querySelector('#removeBtn').addEventListener('click', () => {
  // Get active elements
  let activeEl = document.querySelectorAll('.dot.active');

  // If we found active element then remove active class of last active element
  if (activeEl.length > 0) {
    activeEl[activeEl.length - 1].classList.remove('active');
  }
})

.dots {
  position: relative;
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 10px;
  margin-bottom: 40px;
}

.dot {
  position: relative;
  height: 10px;
  width: 100%;
  background-color: grey;
  margin: 5px;
}

.dot.active {
  background-color: red;
}

<button type="button" id="removeBtn">Remove</button>
<button type="button" id="addBtn">Add</button>

<div class="dots">
  <div class="dot active"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

uj5u.com熱心網友回復：

您可以檢查以下邏輯以querySelectorAll查找最后一個活動元素并nextElementSibling用于應用更改

document.querySelector('#addBtn').addEventListener('click', () => {
  const activeElements = document.querySelectorAll('.dot.active')

  //no active elments
  if (!activeElements || !activeElements.length) {
    //set active class for the first found element
    const firstElement = document.querySelector('.dot')
    if (firstElement) {
      firstElement.classList.add('active')
      return
    }
  }

  //finding the last active element
  const lastElement = activeElements[activeElements.length - 1];
  
  //apply the class the next element of the current active element
  const nextElement = lastElement.nextElementSibling
  if (nextElement) {
    nextElement.classList.add('active')
  }
})

document.querySelector('#removeBtn').addEventListener('click', () => {
  const activeElements = document.querySelectorAll('.dot.active')
  //finding the last active element 
  const lastElement = activeElements[activeElements.length - 1];
  if (lastElement) {
    //remove the active class from the last active element
    lastElement.classList.remove('active')
  }
})

.dots {
  position: relative;
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 10px;
  margin-bottom: 40px;
}

.dot {
  position: relative;
  height: 10px;
  width: 100%;
  background-color: grey;
  margin: 5px;
}

.dot.active {
  background-color: red;
}

 <button type="button" id="removeBtn">Remove</button>
 <button type="button" id="addBtn">Add</button>

 <div class="dots">
   <div class="dot active"></div>
   <div class="dot"></div>
   <div class="dot"></div>
   <div class="dot"></div>
   <div class="dot"></div>
 </div>

標籤：javascript css

上一篇：如何使用JSDoc記錄帶有腳本設定的Vue組件？

下一篇：如何更新Firestore欄位以賦予其空值（未定義或null）？