Question

我试图在js上为我的网站做简单的滑块，但我有问题。

我有变量＆＃34;我＆＃34;，我无法使用它。

您可以查看我的代码。

这个问题的解决方案是什么？

    var slider = [];
    var radio = [];

for (var i = 1; document.querySelector('.radio-' + i) !== null; i++) { //this variable

radio[i] = document.querySelector('.radio-' + i);
radio[i].addEventListener('click', function () {
    for (var u = 1; document.querySelector('.slider' + u) !== null; u++) {
        slider[u] = document.querySelector('.slider' + u);

        if (slider[u].classList.contains('slider-show')) {
            slider[u].classList.remove('slider-show');
        }
    }
    slider[i].classList.add('slider-show'); //want to use here
});
}

Answer 1

你的问题的原因是当我点击其中一个单选按钮时，我被设置为你的循环的最后一个索引。

跟踪值i在监听器定义的时间你必须使用闭包：

var listener = (function (i) {

  return function(evt){

    for (var u = 1; document.querySelector('.slider' + u) !== null; u++) {
      slider[u] = document.querySelector('.slider' + u);

      if (slider[u].classList.contains('slider-show')) {
           slider[u].classList.remove('slider-show');
       }
    }
    slider[i].classList.add('slider-show');
  }
})(i);

radio[i].addEventListener('click', listener);

Answer 2

我。在ES5中你需要在无线电和滑块之间建立一些连接，我的命题是无线电中的数据属性，例如data-i和滑块中的相同属性。您有问题的行看起来像：

slider[this.dataset.i].classList.add('slider-show');

广播和滑块都需要data-i个属性。因此，广播1具有data-i="1"，滑块1具有data-i="1"。

II。在ES5中，您还可以使用具有自己变量范围的匿名函数

for (var i = 1; document.querySelector('.radio-' + i) !== null; i++)     { 

function(i){

    //here rest of code with addEventListener
    //i is scope variable so it will work as supposed

}(i);

}

III。在ES6中将i声明为块变量，因此请在for循环中使用let i而不是var i。

未捕获的TypeError：无法读取属性＆＃39; classList＆＃39;未定义的

2 个答案: