jquery 为什么这个html/JavaScript组合会以这种方式打印出来?[duplicate]

unhi4e5o  于 2022-12-12  发布在  jQuery
关注(0)|答案(4)|浏览(135)

此问题在此处已有答案

JavaScript closure inside loops – simple practical example(44个答案)
5天前关闭.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Ovi Maps API Example</title>
   
  </head>
  <body>
      <button id="butt1" name="butt" type="button">Click Me!</button>
      <button id="butt2" name="butt" type="button">Click Me!</button>
      <button id="butt3" name="butt" type="button">Click Me!</button>
  </body>
   <script src="jquery.js" type="text/javascript" charset="utf-8"></script>
   <script src="foo.js" type="text/javascript" charset="utf-8"></script>
</html>

还有......

$(document).ready(function() {
    //alert("ready");
    var myClickFunctions = new Array();
    
    //add event handlers to all three buttons
    for(var i=1;i<=3;i++){
      
      myClickFunctions[i]=function(){
        var index = i;
        alert(index);
      }
      
      var buttonID = "#butt";
      var button  = $(buttonID + i);    
      button.click(myClickFunctions[i]);
    }
    
 });

每个按钮都打印4。为什么会这样?有什么好方法可以让每个按钮打印创建处理程序时使用的i的值?

fv2wmkja

fv2wmkja1#

阅读JavaScript闭包及其工作原理。事实上,底部button.click(myClickFunctions[i]);中的i在最后将是4。记住,var index=i不是在声明函数时设置的,而是在调用函数时设置的。您需要做的是将函数 Package 在闭包中,如下所示:

myClickFunctions[i]=(function(i){
    return function(){
      var index = i;
      alert(index);
    }
  })(i)

或者更好的做法是:

//put this anywhere
function myClickFunctions(i){
  return function(){
    alert(i);
  }
}

//and at the end:
button.click(myClickFunctions(i));

myClickFunctions函数将获取i的当前值,并返回一个已经设置了该值的函数,这是正确的方法。

4nkexdtk

4nkexdtk2#

你设置的匿名函数myClickFunctions[i]是在i周围创建一个闭包。闭包是在变量本身上关闭的,而不是在创建闭包时的值。所以当函数实际运行时,i是4,所以你总是得到4。
一个简单的修复方法是调用一个返回函数的函数,并捕获i的当前值。

myClickFunctions[i] = (function(curI) {
     return function() {
        var index = curI;
        alert(index);
     };
})(i);

如果这让你感到困惑,那么我建议你多读一些JavaScript中的闭包,它们很快就会成为你的第二天性。

41ik7eoe

41ik7eoe3#

因为每次函数循环时都要给同一个变量赋一个新值,所以当单击任何按钮时,var Index都是4。
使每个锚标记打印出其索引的快速方法是附加类似于以下内容的内容:

$('a').click(function() {
    var theAnchors = $('a');
    for (i in theAnchors)
        if (theAnchors[i] == this)
            alert(i);
});

我能看到的唯一问题是,我怀疑对象相等性比较只有在被比较的两个DOM元素完全相同时才会验证为true,但它们可以。
此外,虽然,什么是最终目标,你试图在这里完成(因为我敢肯定,使一个页面,骚扰用户与警报点击任何锚不是你的预期最终目标)。

khbbv19g

khbbv19g4#

循环结束时“i”的值是“4”,因此每次单击按钮时显示的数字都是“4”,因为您访问的是“i”的引用,而函数是在您单击按钮时执行的,而不是在循环期间执行的。
如果你想得到的数字“i”是相同的按钮id,所以我建议这样做。

$(document).ready(function() {
//alert("ready");
var myClickFunctions = new Array();

//add event handlers to all three buttons
for(var i=1;i<=3;i++){

  myClickFunctions[i]=function(){
    var id = $(this).attr('id');
    var index = id.replace('butt', '');
    alert(index);
  }

  var buttonID = "#butt";
  var button  = $(buttonID + i);    
  button.click(myClickFunctions[i]);
}

});

相关问题