javascript - 事件未添加到for循环中

这是html。如果单击链接，我想用一些文本替换其前面的span元素。

<p><span id="sp1">that1</span> <a href="#" id="update1">Update1</a></p>
<p><span id="sp2">that2</span> <a href="#" id="update2">Update2</a></p>
<p><span id="sp3">that3</span> <a href="#" id="update3">Update3</a></p>
<p><span id="sp4">that4</span> <a href="#" id="update4">Update4</a></p>
<p><span id="sp5">that5</span> <a href="#" id="update5">Update5</a></p>

如您所见，我的想法是给跨度给锚定相同的ID和一个数字。

在我的jquery代码中，我遍历所有锚元素，为它们提供一个click-event，这会导致替换其前面的span-element。

<script type="text/javascript" >

  $(document).ready(function() {
   var numSpans = $("span").length;
   for (n=0;n<=numSpans;n++) {
     $("a#update" + n).click(function(e){
       $('span#sp' + n).replaceWith('this');
       e.preventDefault();
     });
   }
  });

</script>

由于某些原因，这不起作用。

我究竟做错了什么？

最佳答案

原始代码的问题在于，您正在创建变量n的闭包。调用事件处理程序时，将在调用点而不是声明点使用n的值进行调用。您可以通过添加警报呼叫来看到此信息：

$(document).ready(function() {
    var numSpans = $("span").length;
    for (n = 1; n <= numSpans; n++) {
        $("a#update" + n).click(function(e) {
            alert(n); //Alerts '6'
            $('span#sp' + n).replaceWith('this');
            e.preventDefault();
        });
    }
})

解决此问题的一种方法是在每次迭代中对n的值创建一个闭包，如下所示：

$(document).ready(function() {
    var numSpans = $("span").length;
    for (n = 1; n <= numSpans; n++) {
        $("a#update" + n).click(
            (function(k) {
                return function(e) {
                    alert(k);
                    $('span#sp' + k).replaceWith('this');
                    e.preventDefault();
                }
            })(n)
        );
    }
})

但是，这很麻烦，您最好使用更多的jQuery-y方法。



一种方法是从代码中删除id。除非您需要它们用于其他用途，否则不需要它们：

<p><span>that1</span> <a href="#" class="update">Update1</a></p>
<p><span>that2</span> <a href="#" class="update">Update2</a></p>
<p><span>that3</span> <a href="#" class="update">Update3</a></p>
<p><span>that4</span> <a href="#" class="update">Update4</a></p>
<p><span>that5</span> <a href="#" class="update">Update5</a></p>

jQuery的：

$(function() {
    $('a.update').live('click', function() {
        $(this).siblings('span').replaceWith("Updated that!");
    });
});

jsFiddle

关于javascript - 事件未添加到for循环中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/6332589/