for循环内Jquery代码中的变量插值

Question

我有一些代码，http://jsfiddle.net/hucw940s/ 它有一个 for 循环。

before
<div id="container">

</div>
after

for (i = 1; i < 4; i++){
  var showMe = $('<a href=# id="link' + i + '">')
    .append('click').click(function(){ alert('You clicked num: ' + i) });
  $('#container').append(
    $('<div id="div'+i+'">').append('this is div number: ' + i).append(showMe)
  ); 
}

所以链接是使用 id=link1、link2、link3 等生成的，并且附加的 div 是相同的，但是 onclick 代码似乎在事件之后将 var i 放入，所以点击任何链接他们说“你点击数字 4"

如何使用点击时调用的函数内点击链接中的 i？

Answer 1

您遇到的是基于您的代码的预期行为。

但是，您实际上要做的是将event data 传递给您的click 函数。这可以这样完成：

for (i = 1; i < 4; i++) {
    var showMe = $('<a href=# id="link' + i + '">').append('click')

    .click({value: i}, function (e) { alert('You clicked num: ' + e.data.value) });
  
    $('#container').append($('<div id="div' + i + '">').append('this is div number: ' + i).append(showMe));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">

</div>

• 首先，你必须分配事件数据，所以我们传入一个对象 {value: i} 在我们传入处理函数之前。
• 然后，在处理函数中，我们将变量e分配给 事件，所以我们可以访问数据属性。
• 最后，您访问通过引用传入的值 e.data.value。

您可以根据需要添加任意数量的事件数据对象，并以这种方式通过名称引用它们。

您的代码未按预期工作的原因是因为在单击事件发生时变量i 已经等于3，因为for 循环在您能够单击任何之前完成的链接。

希望这有助于您更好地了解您的代码为何如此运行以及您可以采取哪些措施来修复它。

Answer 2

将 id 存储在 data-attribute 中。

Updated jsFiddle