Javascript 尝试使用vanilla addEventListner单独瞄准多个交换机组件，但只命中第一个组件-I'；我没有使用'；这'；正确地

我在一个页面上有多个开关组件

input type=“checkbox”

，我想通过

addEventListner（）

在这些组件上分别切换一个类

.active

。我用的是香草，不是jQuery

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

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

这里有一个，有3次尝试；打开控制台以查看第一个开关元件上的

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

开关

转换
对
不

---

有谁能建议我如何独立地正确地针对每个元素来切换类吗？

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

让fireMySwitch=函数（输入类型，类名）{
for（document.querySelectorAll的const mySwitchInput（`input[type=${inputType}`））{
mySwitchInput.addEventListener（'change'，函数（事件）{
！this.checked？this.classList.remove（className）：this.classList.add（className）；
});
}
}
fireMySwitch（“复选框”、“活动”）；

.active+*{
背景色：绿色！重要；
}

开关

转换
对
不
开关

转换
对
不
开关

转换
对
不
开关

转换
对
不

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

让fireMySwitch=函数（输入类型，类名）{
for（document.querySelectorAll的const mySwitchInput（`input[type=${inputType}`））{
mySwitchInput.addEventListener（'change'，函数（事件）{
！this.checked？this.classList.remove（className）：this.classList.add（className）；
});
}
}
fireMySwitch（“复选框”、“活动”）；

.active+*{
背景色：绿色！重要；
}

开关

转换
对
不
开关

转换
对
不
开关

转换
对
不
开关

转换
对
不

您可以使用forEach方法对所有输入进行循环，并实现相同的效果。

让fireMySwitch=函数（输入类型，类名）{
const mySwitchInputs=document.querySelectorAll（`input[type=${inputType}`）；
mySwitchInputs.forEach（mySwitchInput=>{
mySwitchInput.addEventListener（“更改”，e=>{
e、 target.classList.toggle（className）
}) 
})      
}
fireMySwitch（“复选框”、“活动”）；

.active+*{
背景色：绿色！重要；
}

开关

转换
对
不
开关

转换
对
不
开关

转换
对
不
开关

转换
对
不

您可以使用forEach方法对所有输入进行循环，并实现相同的效果。

让fireMySwitch=函数（输入类型，类名）{
const mySwitchInputs=document.querySelectorAll（`input[type=${inputType}`）；
mySwitchInputs.forEach（mySwitchInput=>{
mySwitchInput.addEventListener（“更改”，e=>{
e、 target.classList.toggle（className）
}) 
})      
}
fireMySwitch（“复选框”、“活动”）；

.active+*{
背景色：绿色！重要；
}

开关

转换
对
不
开关

转换
对
不
开关

转换
对
不
开关

转换
对
不

太好了，谢谢！忘了说我修改了。querySelectorAll，但obv没有在正确的上下文中使用for循环。将此标记为已接受。实际上，以前没有真正使用过“for of”循环。请看它们有多明显的用处。谢谢，尽管任何迭代方法都可以-

for（设i=0；i

或

querySelectorAll（…）.forEach（（输入）=>{…

是的，我对querySelector/querySelectorAll的要求太高了-再次感谢。太好了，谢谢！忘了说我修改了。querySelectorAll但obv没有在正确的上下文中使用for循环。将此标记为已接受。实际上以前没有真正使用'for of'循环，所以现在可以看到它们有多么明显的有用。CheersYep，尽管任何迭代方法都可以工作-

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