通过单选按钮循环事件监听器。可能吗？

Posted 2021-04-07

昨天我试图使用javascript在单选按钮上创建一个滑块，几个小时后完成下面引用的代码。我对JavaScript很陌生，但知道重复操作应放在循环中。那么有机会这样做吗？

var slide = document.getElementsByClassName('slide');

var radio = document.querySelectorAll('.slider-form [type="radio"]');


var x = function () {
    for( var i = 0; i < slide.length; i += 1) {
        if(radio[i].checked === true) {
            slide[i].style.display = "flex";
        } 
    }
}

x();

radio[0].addEventListener('change', function () {
    slide[0].style.display = "flex";
    slide[1].style.display = "none";
    slide[2].style.display = "none";
});

radio[1].addEventListener('change', function () {
    slide[0].style.display = "none";
    slide[1].style.display = "flex";
    slide[2].style.display = "none";
});

radio[2].addEventListener('change', function () {
    slide[0].style.display = "none";
    slide[1].style.display = "none";
    slide[2].style.display = "flex";
});

第二个问题是，我可以以某种方式将我的收音机[数字]与幻灯片[相同的数字]绑定，所以我可以像这个例子中那样更改类：

$("input[type=radio]:not(:checked)").addClass("hiddenRadio");

同样，我有兴趣最小化我的代码（因为可能有十个或更多按钮），所以有没有办法在1-2行代码或循环中应用更改类。

答案

尝试以下解决方案我想这会解决你的问题。

var slides = document.querySelectorAll('.slide');
var radios = document.querySelectorAll('.slider-form [type="radio"]');

function hideAllSlide() {
  slides.forEach(function(slide) {
    slide.style.display = 'none';
  });
}

radios.forEach(function(radio, index) {
  if(radio.checked){
    slides[index].style.display = 'flex';
  }
  
  radio.addEventListener('change', function() {
      hideAllSlide();
      slides[index].style.display = 'flex';
  });
});

以上是关于通过单选按钮循环事件监听器。可能吗？的主要内容，如果未能解决你的问题，请参考以下文章

如何将侦听器附加到单选按钮

在 Sencha Touch 中处理单选按钮上的事件

单选按钮以片段形式传递数据

安卓常用控件--单选按钮和复选框

使用 jQuery，为单选按钮设置 onClick 事件侦听器的最佳方法是啥？

安卓讲课笔记5.4 单选按钮和复选框