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

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

javascript jquery function

Javascript for循环中的jQuery click（）函数显示意外行为,javascript,jquery,function,click,Javascript,Jquery,Function,Click,我想在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>

我想在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>


$（窗口）。加载（函数（）{
函数loadContent（）{
var值=['a'，'b'，'c']；
对于（变量i=0；i



如您所见，如果单击“a”（a），我希望显示字符“a”，单击“b”时显示“b”，依此类推。不幸的是，单击“a”时会显示字符“c”。不会触发其他事件。我看不出我犯了什么错误
我不在乎这个代码是否有效。我只是想知道，为什么click（）在这种情况下不能像预期的那样工作。提前感谢您提供的任何提示或解决方案
 您有3个具有相同ID的元素。一个ID应该是唯一的。
您的所有ID都设置为“a”。尝试将您的id设置为a、b、c
在您的示例中，
标记的id都是“a”。
您在这里遇到了一些问题：

所有id
属性都设置为id=“a”
，因此每次都要绑定第一个元素（这是单击处理程序的主要问题）。将第二个设置为id=“b”
，第三个设置为id=“c”

元素不能自动关闭，我们的jQuery包括从/>
到
的需要修复
应该是
您使用的是限定于函数范围的id
，但没有必要使用function2（this.id）
作为最简单的解决方案

.
您创建的每个“单击”处理程序都将引用相同的单个变量“id”。您将注意到它在循环的每次迭代中都会发生变化。循环完成后，它将指向最后一个循环
您需要以不同的方式设置处理程序：
    for (var i = 0; i < values.length; ++i) {
      var id = values[i];
      alert(id);
      $('#' + id).click((function(id) {
        return function() { function2(id); };
      })());
    }

for（变量i=0；i

为for
循环构造的块不会像在某些语言中那样创建新的词法范围。在Javascript中，“id”变量是“loadContent”函数的局部变量。版本中的每一个“单击”处理程序都引用同一个变量。
应该有一个完整的Stackexchange站点专门讨论这个问题：-）为什么还没有出现在JavaScript常见问题解答中？这不是唯一的问题，id
属性也是一个问题。如果代码的其余部分没有全部损坏，那么它看起来肯定是个问题。我想他只是打错了。否则他为什么总是看到“c”？编辑-啊，很好的编辑：-）是的，很抱歉你是对的，这也是一个问题，但不是最简单的修复方法，在我看来，this.id
在这种情况下可以工作，而且更便宜：）谢谢你的解释。这很有帮助。@Nick是的，当然在这种情况下是这样的。尽管如此，如果他就是这样解决这个问题的，那就需要另外一个问题来解决关闭问题！