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 片段并发现问题之前，我总是会以错误的行为结束）

希望这可能对某人有所帮助。