class 中的 addEventListener 總是在第一個元素上執行

Question

我有這段代碼，它是關於根據其復選框輸入禁用和啟用表單的按鈕。 它在不同的頁面上執行，您可以看到最后兩行，我在頁面上循環遍歷 forms，當頁面中有一個 from 時，一切正常，但是，在有多個表單的頁面上，它沒有不管我選中哪個復選框（例如第二個或第三個）它總是會影響第一個按鈕。

您會注意到有兩個“console.log”語句，第一個返回正確的輸入元素（因此當頁面中有兩個 forms 時，您可以在控制台中看到元素引用 DOM 上的正確輸入），但是，第二個總是在控制台中顯示一個元素，引用 DOM 中的第一個輸入。

我的猜測是我添加事件偵聽器的方式有問題，有什么建議可以讓它工作嗎？

 class Steps { constructor(el) { this.el = el; this.bindDOM(); this.bindStepEvents(); } bindDOM() { this.checkboxSelectorStep = this.el.querySelector('.radio-selector-steps-enable'); this.submit = this.el.querySelector('button[type=submit]'); } bindStepEvents() { console.log(this.checkboxSelectorStep); // returns the correct element this.checkboxSelectorStep.addEventListener('click', (ev) => { console.log(this.checkboxSelectorStep); // always returns the first element if (ev.target.checked) { this.submit.removeAttribute('disabled'); } else { this.submit.setAttribute('disabled', ''); } }); } } const forms = Array.from(document.querySelectorAll('.radio-selector-steps-form')); forms.map(form => new Steps(form));

 <form method="get" class="radio-selector-steps-form"> <input type="checkbox" name="checkbox-selector-step" id="checkbox-selector-step" class="radio-selector-steps-enable"> <label for="checkbox-selector-step"><span>some text</span></label> <button type="submit" disabled="">button text</button> </form> <form method="get" class="radio-selector-steps-form"> <input type="checkbox" name="checkbox-selector-step" id="checkbox-selector-step" class="radio-selector-steps-enable"> <label for="checkbox-selector-step"><span>some text</span></label> <button type="submit" disabled="">button text</button> </form>

Answer 1

您需要使用 querySelector All而不是 querySelector

  bindDOM() {
    this.checkboxSelectorStep = this.el.querySelectorAll(STEPS_ENABLE_CHKBOX);
    this.submit = this.el.querySelector(STEPS_FORM_SUBMIT);
  }

  bindStepEvents() {
    console.log(this.checkboxSelectorStep);
    this.checkboxSelectorStep.forEach(function(elem) { 
      elem.addEventListener('click', (ev) => {
      console.log(this.checkboxSelectorStep);
      if (ev.target.checked) {
        this.submit.removeAttribute('disabled');
this.update(JSON.parse(this.steps[0].primaryInput.value))
      } else {
        this.submit.setAttribute('disabled', '');
      }
    });
});

Answer 2

問題是兩個輸入具有相同的 id，並且 label 引用該 id，因此按下輸入本身可以正常工作，但是每當單擊 label 時，都會調用第一個偵聽器。

（由於樣式的原因，我無法單擊輸入，因此在我嘗試為其創建 SO 片段並發現問題之前，我總是會以錯誤的行為結束）

希望這可能對某人有所幫助。