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

Question

My code does work but I don't want the jshint errors anymore:

Functions declared within loop referencing an outer scoped variable may lead to confusing semantics

1. I've tried using let from ES6 to get around the error because I thought that would solve the problem. I configured my gruntfile to use ES6 as well.

2. I tried using two loops, the outer loop with variable 'i' and the inner loop with variable 'j'

Neither worked.

Full code provided here: https://jsfiddle.net/rwschmitz/zz7ot3uu/

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');
    };
}

Answer 1

You could change your loops to something like this, using Array#forEach() :

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);

Answer 2

Two additional examples of how to fix the problem.

 var hobbies = document.querySelectorAll('.hobbies'); var eventHooks = ['mouseover', 'click']; hobbies.forEach(function(hobby) { eventHooks.forEach(function(hook) { hobby.addEventListener(hook, 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 = document.getElementsByClassName('hobbies'); var eventHooks = ['mouseover', 'click']; // Attach events var attachEvents = function(key) { eventHooks.forEach(function(hook) { hobbies[key].addEventListener(hook, 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'); }); }); }; // Init var init = function() { // Loop through hobbies for (var i = 0; i < hobbies.length; i++) { attachEvents(i); } } init();