Question

我想在for循环中使用jQuery的click（）函数，以便使三个HTML元素可单击。我创建了一个简单的测试用例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js" />
  <script type="text/javascript">
    $(window).load(function() {
      function loadContent(){
        var values = ['a','b','c'];
        for (var i = 0; i < values.length; ++i) {
          var id = values[i];
          alert(id);
          $('#' + id).click(function() {
            function2(id);
          });
        }
      }

      function function2(id) {
        // do some fancy stuff like...
        alert(id);
      }

      loadContent();
    });
  </script>
</head>
<body>
  <div id="map">
    <a id="a">a</a>
    <a id="b">b</a>
    <a id="c">c</a>
  </map>
</body>

正如您所看到的，如果我点击“a”（a），在点击“b”时显示“b”，我想显示字符“a”，依此类推。不幸的是，点击“a”时会显示字符“c”。没有其他事件被触发。我没有看到我犯的错误。

如果此代码有效或无效，我不打扰。我只是想知道，为什么click（）在此上下文中没有按预期运行。提前感谢任何提示或解决方案。

Answer 1

您创建的每个“点击”处理程序都会引用相同的单个变量“id”。您会注意到它在循环的每次迭代中都会发生变化。循环完成后，它将指向最后一个循环。

您需要以不同方式设置处理程序：

    for (var i = 0; i < values.length; ++i) {
      var id = values[i];
      alert(id);
      $('#' + id).click((function(id) {
        return function() { function2(id); };
      })());
    }

为for循环构建的块确实不创建新的词法范围，就像在某些语言中一样。在Javascript中，“id”变量是“loadContent”函数的局部变量。您的版本中的每个“单击”处理程序都引用相同的变量。

Answer 2

您有3个具有相同ID的元素。 ID应该是唯一的。

Answer 3

您的所有ID都设置为“a”。尝试将您的ID设置为a，b，c

Answer 4

<a></a>代码的ID在您的示例中都是“a”。

Answer 5

这里有一些问题：

您的所有id属性都设置为id="a"，因此您每次都会重新绑定第一个元素（这是您的click处理程序的主要问题）。将第二个设置为id="b"，将第三个设置为id="c"。
<script>元素无法自动关闭，我们的jQuery包含需要从/>到></script>
</map>应为</div>
您正在重新使用作为该函数的id作用域，但您也不需要使用function2(this.id)作为您案例的最简单修复。

You can test the updated/working version here

for循环中的jQuery click（）函数显示意外行为

5 个答案: