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

Question

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

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

1. 我已经尝试使用 ES6 中的 let 来解决该错误，因为我认为这可以解决问题。我也将 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();