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

Question

我的代码的工作，但我不希望jshint错误了：环内声明

功能引用外部范围的变量可能会导致混淆的语义

1. 我试过用ES6来解决错误，因为我认为这样可以解决问题。我也配置了我的gruntfile以使用ES6。

2. 我尝试使用两个环，外环与变量“i”和具有可变“J”

无论工作的内部循环。这里提供

全码：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

你可以改变你的循环，以这样的事情，使用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

两个例子。

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