Попытка индивидуально настроить таргетинг на несколько компонентов Switch с помощью vanilla addEventListner, но только по первому - я не правильно использую «this»

Question

У меня есть несколько компонентов Switch input type="checkbox" на странице, и я хочу переключить класс .active для этих по отдельности через addEventListner(). Я использую ваниль, а не jQuery.

У меня он работает на элементе first , но ни один из остальных не работает. Мне нужно, чтобы все они работали независимо.

Очевидно, я не нацеливаюсь на «это» правильно. Я сделал отдельные удары по нему, используя комбинации объявления функции, выражения, стандартного синтаксиса функции и стрелки. С помощью стрелки я стремился использовать лексическую область видимости, чтобы повлиять на правильную область видимости «this».

Вот Codepen с 3 попытками; откройте консоль для просмотра переключателя класса .active на элементе first .

Вот один из примеров (также в пере):

// 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

Вы можете использовать метод forEach для l oop по всем входам и достичь того же эффекта.

let fireMySwitch = function(inputType, className) {
  const mySwitchInputs = document.querySelectorAll(`input[type=${inputType}`);   
  mySwitchInputs.forEach(mySwitchInput => {
      mySwitchInput.addEventListener("change", e => {
         e.target.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>

Answer 2

У вас есть несколько входов, поэтому вам нужно перебрать все из них, которые соответствуют селектору, а не только один:

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>