添加多個事件監聽器的更聰明的方法？

Question

為了開始使用我一直在學習的 javascript 技能，我創建了一個頁面，您可以在其中單擊 1-5 的數字，它們會慢慢消失。 有沒有更好的編碼方法而不是在彼此之間列出事件偵聽器？

 const one = document.querySelector(".one");
const two = document.querySelector(".two");
const three = document.querySelector(".three");
const four = document.querySelector(".four");
const five = document.querySelector(".five");

one.addEventListener('click', e => {
one.remove();
two.addEventListener('click', e => {
  two.remove();
  three.addEventListener('click', e => {
    three.remove();
    four.addEventListener('click', e => {
      four.remove();
      five.addEventListener('click', e => {
        five.remove();
        });
      });
    });
  });
});

Answer 1

使聽眾成為同齡人並添加一些數據以保持 state 其中一個必須單擊下一步...

let listenTo = 1

one.addEventListener('click', e => {
  if (listenTo === 1) {
    listenTo = 2
    // fade away code
  }
})

two.addEventListener ...

這些可以在一個循環中設置，也可以像這樣......

// give the elements id="zero", etc in the markup
let ids = [ "zero", "one", "two" ... ]
let listenTo = "zero"

let listeners = ids.map((id, index) => {
  let el = document.getElementById(id)
  return el.addEventListener('click', e => {
    if (listenTo === id) {
      listenTo = index < ids.length-1 ? ids[index+1] : null
      // fade away code
    }
  })
})