Javascript 如何在表行和映射点之间切换循环中的类？

我在一个表中有10行，其中包含地图上每个标记的地址。我正在尝试向映射上的每个标记添加一个单击事件，并将其添加到对应的表行中。我尝试通过for循环来完成，而不是单独编写每个click事件。最好的方法是什么？下面的for循环仅适用于最后一次迭代，但不适用于所有迭代

for (var i=0; i < 10; i++) {
        var maptag = "#maptag";
        var maprow = "#maprow";
        $(maptag + +i).click(function() {
            console.log('in the hole!');
            $(maprow + +i).toggleClass('highlight');
            return false;
});

for（变量i=0；i<10；i++）{
var maptag=“#maptag”；
var maprow=“#maprow”；
$（maptag++i）。单击（函数（）{
console.log（'in the hole！'）；
$（maprow++i）.toggleClass（'highlight'）；
返回false；
});

您的问题是作用域。发生的情况是，当您创建

单击事件时，
i
是循环中的当前值。但是，当触发
单击事件时，
i
被设置为循环结束时的状态（即，您的最后一个）

您需要做的是将其包装到一个函数中以影响作用域。如下所示：

for (var i=0; i < 10; i++) {
    var maptag = "#maptag";
    var maprow = "#maprow";
    $(maptag + i).click((function (i) { return function() {
        console.log('in the hole!');
        $(maprow + i).toggleClass('highlight');
    })(i));
}

您在那里传入
i
，但是返回的函数内部使用了一个
i
，它实际上是一个不同的变量。内部
i
不会随着循环的变化而变化，因此当实际触发
单击时，它将具有您期望的值


另外，以前从未见过
variableName++i
。不确定这是否是打字错误，或者是我不知道的某些特殊语法，但如果是，这里似乎没有必要。您的
返回false
也没有必要，因为如果没有它，它将隐式返回
null
，这也是一个假值（除非您正在使用
==
的某个地方显式检查
false
）.
您的问题是作用域。发生的情况是，当您创建
单击事件时，
i
是循环中的当前值。但是，当触发
单击事件时，
i
被设置为循环结束时的状态（即，您的最后一个）

您需要做的是将其包装到一个函数中以影响作用域。如下所示：

for (var i=0; i < 10; i++) {
    var maptag = "#maptag";
    var maprow = "#maprow";
    $(maptag + i).click((function (i) { return function() {
        console.log('in the hole!');
        $(maprow + i).toggleClass('highlight');
    })(i));
}

您在那里传入
i
，但是返回的函数内部使用了一个
i
，它实际上是一个不同的变量。内部
i
不会随着循环的变化而变化，因此当实际触发
单击时，它将具有您期望的值


另外，以前从未见过
variableName++i
。不确定这是否是打字错误，或者是我不知道的某些特殊语法，但如果是，这里似乎没有必要。您的
返回false
也没有必要，因为如果没有它，它将隐式返回
null
，这也是一个假值（除非您在某个带有
==
的地方显式检查
false
）。
您可能需要关闭

for (var i = 0; i < 10; i++) {
  var maptag = "#maptag";
  var maprow = "#maprow";
  (function(x) {  // IIFE
    $(maptag + +x).click(function() {
      console.log('in the hole!');
      $(maprow + +x).toggleClass('highlight');
      return false;
    })
  }(i))
}

for（变量i=0；i<10；i++）{
var maptag=“#maptag”；
var maprow=“#maprow”；
（函数（x）{//iLife
$（maptag++x）。单击（函数（）{
console.log（'in the hole！'）；
$（maprow++x）.toggleClass（'highlight'）；
返回false；
})
}（i） )
}
您可能需要关闭

for (var i = 0; i < 10; i++) {
  var maptag = "#maptag";
  var maprow = "#maprow";
  (function(x) {  // IIFE
    $(maptag + +x).click(function() {
      console.log('in the hole!');
      $(maprow + +x).toggleClass('highlight');
      return false;
    })
  }(i))
}

for（变量i=0；i<10；i++）{
var maptag=“#maptag”；
var maprow=“#maprow”；
（函数（x）{//iLife
$（maptag++x）。单击（函数（）{
console.log（'in the hole！'）；
$（maprow++x）.toggleClass（'highlight'）；
返回false；
})
}（i） )
}
i++将数字转换为string@xgrioux将
i
添加到
maprow
就是将其转换为字符串的方法。我不确定JavaScript使用额外的加号到底在做什么（我会预料到语法错误），但只要尝试一下像
var a=++2；
这样的东西，就会给我一个数字，所以它看起来完全是无关的。哦，你说得对！我取出了+并且它仍然工作++我将数字转换成了astring@xgrioux将
i
添加到
maprow
可以将其转换为字符串。我不确定JavaScript到底在做什么这个额外的加号（我本以为会出现语法错误），但只要尝试一下
var a=++2；
就会给我一个数字，所以它看起来完全是多余的。哦，你说得对！我去掉了+并且它仍然有效