在一個div中定位多個類并計算它們被點擊的次數VanillaJS

這樣做的目的是能夠跟蹤具有類 testButton 或 incButton 的按鈕被單擊的次數，以及是否被單擊兩次以顯示疊加層。

有 2 個主要問題：1：我不確定如何選擇 2 個不同類別的按鈕 2：一旦有超過 1 個按鈕具有相同的類名，現有的 JS 代碼僅適用于帶有 testButton 類的第一個按鈕.

我的代碼是：

<style>
    #winOverlay {
        position: fixed;
        z-index: 200;
        width: 100%;
        height: 100%;
        background-color: red;
        top: 0;
        left: 0;
    }
</style>

<div id="winOverlay" style="display:none"></div>

<div id="buttonContainer">
    <button class="testButton">1</button>
    <button class="incButton">2</button>
    <button class="testButton">3</button>
    <button class="incButton">4</button>
    <button class="testButton">5</button>
</div>


<script>
    var count = 0;
    var btn = document.getElementById("buttonContainer").querySelector(".testButton");

    btn.onclick = function () {
        count  ;
        if (count == 2) {
            document.getElementById('winOverlay').style.display = "block";
        }
    }
</script>

任何幫助將不勝感激。

uj5u.com熱心網友回復：

您可以利用event Delegation在具有類的公共父容器上添加事件偵聽器的位置，buttonContainer您可以檢查按鈕是否僅使用 idtestButton和incButon

var count = 0;
var btn = document.getElementById("buttonContainer");
const winOverlay = document.getElementById('winOverlay');

btn.addEventListener("click", e => {
  const classes = e.target.classList;
  if (classes.contains("testButton") || classes.contains("incButon")) {
    count  ;
    if (count === 2) winOverlay.style.display = "block";
  }
})

#winOverlay {
  position: fixed;
  z-index: 200;
  width: 100%;
  height: 100%;
  background-color: red;
  top: 0;
  left: 0;
}

<div id="winOverlay" style="display:none"></div>

<div id="buttonContainer">
  <button class="testButton">1</button>
  <button class="incButon">2</button>
  <button class="testButton">3</button>
  <button class="incButon">4</button>
  <button class="testButton">5</button>
</div>

uj5u.com熱心網友回復：

您需要使用 querySelectorAll 選擇所有按鈕，向所有按鈕添加偵聽器。

var count = 0;
const buttons = document.querySelectorAll("#buttonContainer > button");
 
for (let index = 0; index < buttons.length; index  ) {
  const e = buttons[index];
  e.onclick = function() {
  count  ;
   if (count == 2) {
    document.getElementById('winOverlay').style.display = "block";
  }
}
}

#winOverlay {
  position: fixed;
  z-index: 200;
  width: 100%;
  height: 100%;
  background-color: red;
  top: 0;
  left: 0;
}

<div id="winOverlay" style="display:none"></div>

<div id="buttonContainer">
  <button class="testButton">1</button>
  <button class="incButon">2</button>
  <button class="testButton">3</button>
  <button class="incButon">4</button>
  <button class="testButton">5</button>
</div>

uj5u.com熱心網友回復：

要選擇 2 個類，您應該像在 css 中一樣：

querySelector(class1 class2)

但是不起作用，因為您不能將 querySelector 用于兩個或多個類。這段代碼說只選擇 class1 或 class2 并取第一個元素。

使用querySelectorAll()具有所有這些

uj5u.com熱心網友回復：

正如其他人所建議的那樣querySelectorAll提供對多個選擇器的支持。它將回傳一個類似陣列的節點串列，然后您可以對其進行迭代。

document.querySelectorAll('testButton', 'incButton');

我將提供一種使用事件委托的替代方法，該方法允許您將一個偵聽器附加到父元素，該元素在事件冒泡 DOM 時捕獲事件。

這個例子也使用了一個閉包（基本上是一個從另一個函式回傳的函式，但是當它回傳時，它可以攜帶在它外部設定的任何變數在本地詞法環境中。如果你想避免全域變數，這是一個有用的模式。在這個如果我們創建一個物件來保存兩種型別按鈕的總數。

// Cache your container and overlay elements
const container = document.querySelector('.buttonContainer');
const overlay = document.querySelector('.overlay');

// Add one listener to the container which calls `handleClick`.
// `handleClick` sets up the object and returns a new function
// (the closure) that carries the object with it.
container.addEventListener('click', handleClick(), false);

function handleClick() {
  
  // An object that holds the button totals
  const cases = {
    testButton: 0,
    incButton: 0
  };
  
  // The function that will be added to the listener
  // It has the event argument
  return function (e) {

    // Destructure the nodeName/className from the
    // element that was clicked
    const { nodeName, className } = e.target;

    // Check to see if the element was a button
    if (nodeName === 'BUTTON') {

      // Increase the value in the object where
      // the key matches the className
        cases[className];
      console.log(JSON.stringify(cases));

      // If that value is 2 show the overlay
      if (cases[className] === 2) {
        overlay.classList.add('show');
      }

    }

  }

}

.overlay { display: none; margin: 1em; background-color: #acaccc; black: white; padding: 2em; }
.show { display: block; }
button { padding: 0.7em; }
button:hover { cursor: pointer; background-color: #acacac; }

<div class="buttonContainer">
  <button class="testButton">1</button>
  <button class="incButton">2</button>
  <button class="testButton">3</button>
  <button class="incButton">4</button>
  <button class="testButton">5</button>
</div>

<div class="overlay">Overlay</div>

附加檔案

• 解構賦值

• nodeName

• classList

標籤：javascript

上一篇：parseFloat導致奇怪的計算

下一篇：將小數決議為非0的小數點到Fixed(2)