Warnung JSHint über Schließungen innerhalb von Schleifen äußere Variablen

Question

Mein Code funktioniert, aber ich will nicht die jshint Fehler mehr:

Funktionen innerhalb der Schleife erklärt Referenzierung eine äußere Variable scoped zu verwirrend Semantik führen

1. Ich habe versucht mit Hilfe von ES6, um den Fehler zu umgehen, weil ich dachte, dass das Problem lösen würde. Ich habe meine Grunt-Datei so konfiguriert, dass sie auch ES6 verwendet.

2. ich versuchte zwei Schleifen verwendet wird, die äußere Schleife mit variabler ‚i‘ und die innere Schleife mit variabler ‚j‘

Weder gearbeitet.

Voll Code hier zu finden: 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

Sie könnten Ihre Loops zu so etwas wie dies ändern, indem 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

Zwei weitere Beispiele dafür, wie das Problem zu beheben.

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