javascript - 数组值作为 if else 的条件 - JS

Question

我一直试图理解为什么每当我单击数组的值时，它总是添加类“foo”。

示例:我单击了伦敦(城市[1]，对吗？)，它添加了 foo 类。

var cities = [
document.getElementById('Paris'),
document.getElementById('London'),
document.getElementById('Berlin')
];


for (var i = 0; i < cities.length; i++) {
  cities[i].onclick = test;

  function test(){
    if(cities[i] === cities[0]) {
      el.classList.add("foo");
    }
  }
}

Answer 1

编辑:我原来的答案不正确，这个更新的答案是正确的。 addEventListener 不返回任何内容。相反，您应该使用某种包装器来添加和删除监听器，这样您就不会在不使用的监听器上浪费资源:

function on (element, eventName, callback) {
    element.addEventListener(eventName, callback);
    return function unregister () {
        element.removeEventListener(callback);
    }
}

function test (event) {
    if (event.currentTarget===cities[0]) {
        event.target.classList.add('foo');
    }
}

var listenerRemovers = cities.map(function (city) {
    return on(city, 'click', test);
});

现在，您可以通过调用 listenerRemovers 数组中的相应函数来删除任何这些监听器:

listenerRemovers.forEach(function (unRegisterFunc) { unRegisterFunc(); });

原来的错误答案:

就其值(value)而言，在这种情况下您可能最好使用 .map，因为最佳实践是保留对事件监听器的引用，以便您可以在需要时取消它们。

function test (event) {
    if (event.currentTarget===cities[0]) {
        event.target.classList.add('foo');
    }
}

var listenerHandlers = cities.map(function (city) {
  return city.addEventListener('click', test);
});