框顯示警報，但我想要其他方法，例如使用 if 鏈或開關或使用 for 循環或使用 map 運算符

Question

當您運行我的代碼並單擊所有三個框時，您會為每個框收到一些警報，但我想要任何警報的替代代碼，就像在我的代碼中一樣，我使用了三次查詢選擇器，但我想知道不使用三次查詢選擇器，但只有一個當我們單擊時，所有框和內部事件偵聽器使用類似 if 鏈或循環的時間來顯示框的警報

我使用查詢選擇器 3 次，如果有任何更改，我會使用 if 鏈或循環來提醒彩色框

 function hi() { //here is using of queryselector but i want this by using of if chain or loop that can show alertness for colored box document.querySelector('.green').addEventListener('click', () => { alert(`hi i'm a green`) }) document.querySelector('.blue').addEventListener('click', () => { alert(`hi i'm a blue`) }) document.querySelector('.orange').addEventListener('click', () => { alert(`hi i'm a orange`) }) } hi()

 .box { width: 600px; height: 70px; text-align: center; font-size: 55px; font-weight: bold; margin: auto; margin-bottom: 50px; margin-top: 70px; padding-top: 0.6%; }.green { background-color: green; }.blue { background-color: blue; }.orange { background-color: orange; } h1 { text-align: center; font-size: 55px; font-weight: bold; }

 <h1>I'm iron man</h1> <div class="box green">I'm a green</div> <div class="box blue">I'm a blue</div> <div class="box orange">I'm a orange</div>

Answer 1

我想您可能正在尋找類似的東西，如果這不是您要找的東西，請告訴我，我會相應地編輯我的答案：

function hi() {
    document.querySelectorAll('.box').forEach(box => {
        box.addEventListener('click', (e) => {
            alert(`hi i'm a ${e.target.className.replace('box', '').trim()}`)
        })
    })
}

Answer 2

您可以將 class box添加到每個 div 和具有 div 顏色的id然后您可以使用document.querySelectorAll('.box')然后遍歷這個數組。 在此迭代中，您可以檢查div的 id 並根據div id顯示警報

例子：

HTML

<h1>I'm iron man</h1>
<div id="green" class="box">I'm a green</div>
<div id="blue" class="box">I'm a blue</div>
<div id="orange" class="box">I'm a orange</div>

JS

function hi() {
  const colorBoxes = document.querySelectorAll('.box');
  colorBoxes.forEach(box => {
    box.addEventListener('click', () => {
     if (box.id === 'green') {
      alert(`hi i'm a green`);
     } else if (box.id === 'blue') {
      alert(`hi i'm a blue`);
     } else {
      alert(`hi i'm a orange`);
     }
    })
  });
}