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

How do I toggle a class within a loop between a table row and map points?

本文关键字：循环 之间 映射      更新时间：2023-09-26

表中有10行，其中包含地图上每个标记的地址。我试图添加一个点击事件到地图上的每个标签到它对应的表行。而不是单独编写每个点击事件，我试图通过一个for循环。最好的方法是什么?下面的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 (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))
}

你的问题是范围。当你创建click事件时，i是循环中的当前值。然而，当click甚至被触发时，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));
}

这看起来有点奇怪，但你所做的是将实际触发另一个函数的函数包装起来，这个函数是自我调用的:

(function (i) {
   // will trigger immediately
}(i);

您在那里传递i，但随后返回的函数内部使用i，这实际上是一个不同的变量。当循环改变时，内部的i不会改变，所以当click实际被触发时，它的值将是您所期望的。

注:我以前从未见过variableName + +i。不确定这是一个打字错误，还是一些我不知道的特殊语法，但如果是，在这里似乎没有必要。您的return false也是不必要的，因为没有它，它将隐式返回null，这也是一个假值(除非您显式检查false某处与===)。

相关文章：