Question

这无疑是由于我对JavaScript的无知。我有两个均衡的对象数组，我循环遍历它们同时添加一个动作处理程序，这样当第一个数组中的 n：th 对象悬停时，会发生一些魔法n：第二个数组中的对象。

这是我的意图。

实际上，计算机“忘记”先前的任务并且只执行最后声明的魔法，而不管其中哪个调用对象悬停。我知道问题是什么，但我想不出一个解决它的好方法。可能已经有了这个问题的答案（对我来说似乎是一个常见的问题），但是因为我显然无法正确地说出问题所以我得到了nada。

代码是这样的。

for (index in pushpins) {
  map.entities.push(pushpins[index]);
  map.entities.push(infoboxes[index]);

  Microsoft.Maps.Events.addHandler(pushpins[index], "mouseover", function (d) {
    infoboxes[index].setOptions({ visible: true });
  });

请注意，问题很可能不是特定于 Microsoft.Maps ，而是因为JavaScript对变量有不同的范围规则。当我静态添加几个实例并将它们称为 some1 ， some2 等时，我得到了预期的行为。我相信 index 以某种方式保留了它的价值。

Answer 1

这里最好的解决方案是移动

Microsoft.Maps.Events.addHandler(pushpins[index], "mouseover", function (d) {
    infoboxes[index].setOptions({ visible: true });
  });

到另一个函数，如：

function addEvent(element, i) {
   Microsoft.Maps.Events.addHandler(element[i], "mouseover", function (d) {
      element[i].setOptions({ visible: true });
   });
}

请参阅：Javascript scope problem或What is the scope of variables in JavaScript?

Answer 2

index未绑定到每个项目。你的循环会为每个项目附加一个处理程序，但它们都引用相同的index，在你的循环之后最终为n。因此，它们都会触发n索引。

一个常见的解决方案是每次迭代使用IIFE，每次迭代创建一个局部范围。这样，处理程序将引用本地index而不是循环外的索引。不是最优的（JSHint尖叫“不要在循环中创建函数”），但是完成了工作。

for (index in pushpins) {
  (function(index){
    map.entities.push(pushpins[index]);
    map.entities.push(infoboxes[index]);

    Microsoft.Maps.Events.addHandler(pushpins[index], "mouseover", function (d) {
      infoboxes[index].setOptions({ visible: true });
    });
  }(index));
}

引用数组中的每个对象

2 个答案: