Javascript 关于使用外部变量的循环内部闭包的JSHint警告

我的代码确实有效，但我不想再出现jshint错误：

在引用外部作用域变量的循环中声明的函数可能会导致语义混乱

我曾尝试使用ES6中的let来绕过这个错误，因为我认为这样可以解决问题。我将GrunFile配置为也使用ES6

我尝试使用两个循环，外部循环使用变量“I”，内部循环使用变量“j”

两者都不起作用

此处提供完整代码：

var嗜好=document.getElementsByClassName（“嗜好”）；
var-active=false；
//用于鼠标输入
对于（变量i=0；i<5；i++）{
爱好[i].onmouseover=function（）{
嗜好[0]。类列表。添加（'cabiods-slide-left'）；
嗜好[1]。类列表。添加（'cabiods-slide-right'）；
嗜好[2]。类列表。添加（'cabiods-slide-left'）；
爱好[3]。类列表。添加（'cabiods-slide-right'）；
嗜好[4]。类列表。添加（'cabiods-slide-left'）；
};
}
//用于单击输入
对于（变量i=0；i<5；i++）{
爱好[i].onclick=function（）{
嗜好[0]。类列表。添加（'cabiods-slide-left'）；
嗜好[1]。类列表。添加（'cabiods-slide-right'）；
嗜好[2]。类列表。添加（'cabiods-slide-left'）；
爱好[3]。类列表。添加（'cabiods-slide-right'）；
嗜好[4]。类列表。添加（'cabiods-slide-left'）；
};
}

您可以使用

数组#forEach（）
将循环更改为如下内容：

关于如何解决此问题的另外两个示例


var habiods=document.querySelectorAll（'.habiods'）；
var eventHooks=['mouseover'，'click']；
嗜好。forEach（功能（嗜好）{
eventHooks.forEach（函数（hook）{
addEventListener（hook，function（））{
嗜好[0]。类列表。添加（'cabiods-slide-left'）；
嗜好[1]。类列表。添加（'cabiods-slide-right'）；
嗜好[2]。类列表。添加（'cabiods-slide-left'）；
爱好[3]。类列表。添加（'cabiods-slide-right'）；
嗜好[4]。类列表。添加（'cabiods-slide-left'）；
});
});
});是的，这很有效。我必须在适当的地方加上7个分号。我对StackOverflow有点陌生。所以我不确定是否值得编辑你的答案。不管怎样，代码仍然可以与您的解决方案一起工作，并消除错误。我会标记为已接受。谢谢哦，我用的是另一种称为
standard
。它本身并不是一个标准，但它包含JavaScript的ASI规则（自动分号插入）。因为这个问题是专门关于linting的，如果你愿意的话，我可以把它们加回去。我会说严格地把它们加回去，因为它是关于主题w/JSHint的。不管怎样，你回答得这么快真是太棒了，我真的很感激你@rudolphschmitz完成了，祝你好运，让你的项目代码标准化，这是一个很好的实践。因为这是关于linting的，所以我也会尝试用非干式代码解决这个问题（爱好[hardcodedNumberLiteral].classList.add（hardcodedString）
），类似于你处理
事件挂钩的方式。如果你不介意的话，我真的很想在我的回答中包括这一点。@PatrickRoberts是的！在您的示例中，添加类非常简洁。感谢您提供了多种解决方案！看起来我需要更加熟悉forEach方法。
var hobbies = document.getElementsByClassName("hobbies");
var active = false;

// For mouse input

for (var i = 0; i < 5; i++) {
    hobbies[i].onmouseover = function() {
            hobbies[0].classList.add('hobbies-slide-left');
            hobbies[1].classList.add('hobbies-slide-right');
            hobbies[2].classList.add('hobbies-slide-left');
            hobbies[3].classList.add('hobbies-slide-right');
            hobbies[4].classList.add('hobbies-slide-left');
    };
}

// For click input

for (var i = 0; i < 5; i++) {
    hobbies[i].onclick = function() {
            hobbies[0].classList.add('hobbies-slide-left');
            hobbies[1].classList.add('hobbies-slide-right');
            hobbies[2].classList.add('hobbies-slide-left');
            hobbies[3].classList.add('hobbies-slide-right');
            hobbies[4].classList.add('hobbies-slide-left');
    };
}

var hobbies = Array.from(document.getElementsByClassName('hobbies'));
var classes = ['hobbies-slide-left', 'hobbies-slide-right'];
var events = ['mouseover', 'click'];

function addHobbyClass (hobby, index) {
  hobby.classList.add(this[index % this.length]);
}

function hobbyEventListener () {
  hobbies.forEach(addHobbyClass, classes);
}

hobbies.forEach(function (hobby) {
  this.forEach(function (event) {
    this.addEventListener(event, hobbyEventListener);
  }, hobby);
}, events);