Question

我的代码确实有效，但我不再需要jshint错误了：

在循环中声明的引用外部范围变量的函数可能会导致语义混淆

我尝试过使用ES6中的let来解决错误，因为我认为这样可以解决问题。我将我的gruntfile配置为使用ES6。
我尝试使用两个循环，外循环带变量＆＃39; i＆＃39;以及带有变量＆＃39; <＆＃39;

两者都没有。

此处提供完整代码：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();

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

2 个答案: