Question

未捕获的类型错误：无法读取未定义的属性“classList”

2016-09-14

4065

javascript

我正在尝试使用 js 为我的网站制作简单的滑块，但是遇到了问题。

我有一个变量“i”，但是无法使用它。

您可以查看我的代码。

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

    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

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

为了在侦听器定义时跟踪 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

I. 在 ES5 中，您需要在 radio 和 slider 之间建立某种联系，我建议在 radio 中使用数据属性，例如 data-i ，在 slider 中使用相同的属性。有问题的行将如下所示：

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

radio 和 sliders 都需要具有 data-i 属性。因此 radio 1 具有 data-i="1" ，slider 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 。