有没有办法用事件监听器整合多个函数？

Question

我正在尝试简化我的代码，但遇到了困难。在实际项目中，我有十个无线电输入出现在单击按钮时。我想要的是，当选择一个单选选项时，所有单选按钮都会消失，并且选中的选项将成为背景图像。

这让我能够做到这一点：

optionOne.addEventListener("click", function() {
  showButton.style.backgroundImage = `url("${optionOneImage}")`;
  showButton.innerHTML = "";
  
  optionsGrid.style.display = "none";
  for (let i = 0; i < optionRadios.length; i++) {
    optionRadios[i].classList.replace("active", "hide");
   }
});

但是，由于有 10 个选项，我是否可以编写某种类型的 switch 语句来读取单击的内容并折叠单选选项？我必须为具有 40 多个无线电选项的东西实现类似的东西，所以我想让它尽可能简洁。

这是我拥有的完整工作代码的CodePen。

Answer 1

您可以向所有无线电添加一个类（或者也只查询无线电元素），然后执行循环以将事件侦听器添加到所有元素。

例如：

<form>
  <input type="radio" name="option" value="1" id="1" hidden>
  <input type="radio" name="option" value="2" id="2" hidden>
  <input type="radio" name="option" value="1" id="3" hidden>
</form>

const allRadios = document.querySelectorAll("form input[type='radio']") //gets all input type radio inside form
allRadios.forEach((singleRadioElement)=>{ // loops over all the elements
  singleRadioElement.addEventListener("click", ()=>{ // adds the event listener for each element
    showButton.style.backgroundImage = `url("${optionOneImage}")`;
    showButton.innerHTML = "";
  
    optionsGrid.style.display = "none";
    for (let i = 0; i < optionRadios.length; i++) {
      optionRadios[i].classList.replace("active", "hide");
    }
  })
})