javascript - 尝试使用普通 addEventListener 单独定位多个 Switch 组件，但只命中第一个 - 我没有正确使用 'this'

Question

我在一个页面上有多个 input type="checkbox" 的 Switch 组件，我想在这些.active 上单独切换> 通过 addEventListner()。我使用的是 vanilla，而不是 jQuery。

我让它在第一个元素上工作，但其他元素都不起作用。我需要他们都独立工作。

显然我没有正确定位“这个”。我使用函数声明、表达式、标准函数语法和箭头的组合对其进行了单独的尝试。通过箭头，我的目标是使用词法范围来影响正确的“this”范围。

这是一个 Codepen 尝试 3 次；打开控制台以查看第一个 Switch 元素上的 .active 类切换。

这是一个示例(也在笔中):

// Working on ONE checkbox:
let fireMySwitch = function(inputType, className) {
  let mySwitchInput = document.querySelector(`input[type=${inputType}`);

  mySwitchInput.addEventListener('change', function (event) {
    !this.checked ? this.classList.remove(className) : this.classList.add(className);
  }, false);
}
fireMySwitch('checkbox', 'active');

这是标记:

<div class="cell my-switch__block">
  <p class="my-switch__copy">Switch</p>
  <div class="switch large">
    <input class="switch-input" id="yes-no_2" type="checkbox" name="mySwitch_2">
    <label class="switch-paddle" for="yes-no_2">
      <span class="show-for-sr">Switch</span>
      <span class="switch-active" aria-hidden="true">Yes</span>
      <span class="switch-inactive" aria-hidden="true">No</span>
    </label>
  </div>
</div>

任何人都可以建议我如何正确地独立定位每个元素来切换类？

Answer 1

您有多个输入，因此您需要迭代与选择器匹配的所有输入，而不仅仅是一个:

let fireMySwitch = function(inputType, className) {
  for (const mySwitchInput of document.querySelectorAll(`input[type=${inputType}`)) {
    mySwitchInput.addEventListener('change', function(event) {
      !this.checked ? this.classList.remove(className) : this.classList.add(className);
    });
  }
}
fireMySwitch('checkbox', 'active');

.active + * {
  background-color: green !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet"/>
<div class="grid-x grid-padding-x small-up-2 align-center-middle align-stretch my-switch__outer">
  <div class="cell my-switch__block">
    <p class="my-switch__copy">Switch</p>
    <div class="switch large">
      <input class="switch-input" id="yes-no_1" type="checkbox" name="mySwitch_1">
      <label class="switch-paddle" for="yes-no_1">
        <span class="show-for-sr">Switch</span>
        <span class="switch-active" aria-hidden="true">Yes</span>
        <span class="switch-inactive" aria-hidden="true">No</span>
      </label>
    </div>
  </div>
  <div class="cell my-switch__block">
    <p class="my-switch__copy">Switch</p>
    <div class="switch large">
      <input class="switch-input" id="yes-no_2" type="checkbox" name="mySwitch_2">
      <label class="switch-paddle" for="yes-no_2">
        <span class="show-for-sr">Switch</span>
        <span class="switch-active" aria-hidden="true">Yes</span>
        <span class="switch-inactive" aria-hidden="true">No</span>
      </label>
    </div>
  </div>
  <div class="cell my-switch__block">
    <p class="my-switch__copy">Switch</p>
    <div class="switch large">
      <input class="switch-input" id="yes-no_3" type="checkbox" name="mySwitch_3">
      <label class="switch-paddle" for="yes-no_3">
        <span class="show-for-sr">Switch</span>
        <span class="switch-active" aria-hidden="true">Yes</span>
        <span class="switch-inactive" aria-hidden="true">No</span>
      </label>
    </div>
  </div>
  <div class="cell my-switch__block">
    <p class="my-switch__copy">Switch</p>
    <div class="switch large">
      <input class="switch-input" id="yes-no_4" type="checkbox" name="mySwitch_4">
      <label class="switch-paddle" for="yes-no_4">
        <span class="show-for-sr">Switch</span>
        <span class="switch-active" aria-hidden="true">Yes</span>
        <span class="switch-inactive" aria-hidden="true">No</span>
      </label>
    </div>
  </div>
</div>

您还可以考虑使用classList.toggle来代替:

let fireMySwitch = function(inputType, className) {
  for (const mySwitchInput of document.querySelectorAll(`input[type=${inputType}`)) {
    mySwitchInput.addEventListener('change', function(event) {
      this.classList.toggle(className);
    });
  }
}
fireMySwitch('checkbox', 'active');

.active + * {
  background-color: green !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet"/>
<div class="grid-x grid-padding-x small-up-2 align-center-middle align-stretch my-switch__outer">
  <div class="cell my-switch__block">
    <p class="my-switch__copy">Switch</p>
    <div class="switch large">
      <input class="switch-input" id="yes-no_1" type="checkbox" name="mySwitch_1">
      <label class="switch-paddle" for="yes-no_1">
        <span class="show-for-sr">Switch</span>
        <span class="switch-active" aria-hidden="true">Yes</span>
        <span class="switch-inactive" aria-hidden="true">No</span>
      </label>
    </div>
  </div>
  <div class="cell my-switch__block">
    <p class="my-switch__copy">Switch</p>
    <div class="switch large">
      <input class="switch-input" id="yes-no_2" type="checkbox" name="mySwitch_2">
      <label class="switch-paddle" for="yes-no_2">
        <span class="show-for-sr">Switch</span>
        <span class="switch-active" aria-hidden="true">Yes</span>
        <span class="switch-inactive" aria-hidden="true">No</span>
      </label>
    </div>
  </div>
  <div class="cell my-switch__block">
    <p class="my-switch__copy">Switch</p>
    <div class="switch large">
      <input class="switch-input" id="yes-no_3" type="checkbox" name="mySwitch_3">
      <label class="switch-paddle" for="yes-no_3">
        <span class="show-for-sr">Switch</span>
        <span class="switch-active" aria-hidden="true">Yes</span>
        <span class="switch-inactive" aria-hidden="true">No</span>
      </label>
    </div>
  </div>
  <div class="cell my-switch__block">
    <p class="my-switch__copy">Switch</p>
    <div class="switch large">
      <input class="switch-input" id="yes-no_4" type="checkbox" name="mySwitch_4">
      <label class="switch-paddle" for="yes-no_4">
        <span class="show-for-sr">Switch</span>
        <span class="switch-active" aria-hidden="true">Yes</span>
        <span class="switch-inactive" aria-hidden="true">No</span>
      </label>
    </div>
  </div>
</div>