Question

我一直试图理解为什么每当我点击数组的值时，它总是会添加类＆＃34; foo＆＃34;。

示例：我点击伦敦（城市[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(); });

原始错误的答案：

对于它的价值，你最好在这种情况下使用.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);
});

Answer 2

这是因为您在循环中设置事件函数。每个函数使用相同的i。

值

尝试使用this而不是在函数内尝试cities[i]。

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

Answer 3

实现此功能的最简单方法是使用jQuery，这是一个想法：

在html标签中，为这些城市提供一个公共类，例如类= “城市”
$（ '城市 '）上单击（函数（）{$（' 的城市。 '）addClass（' 富'）}）;

jQuery为您节省了更多时间和编码工作。

Answer 4

问题是您正在尝试将功能分配给DOM属性。您没有注册侦听器，而是修改DOM。如果您希望这样做，则必须将onclick指定为cities[i].onclick = 'test()'

此外，您应该将功能测试移到for循环之外，如下所示。问题是函数测试被多次声明，每个都有不同的'i'值。

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

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

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

4 个答案: