我在一个页面上有多个 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>
任何人都可以建议我如何正确地独立定位每个元素来切换类?
最佳答案
您有多个输入,因此您需要迭代与选择器匹配的所有输入,而不仅仅是一个:
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>
关于javascript - 尝试使用普通 addEventListener 单独定位多个 Switch 组件,但只命中第一个 - 我没有正确使用 'this',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60469939/