事件不会被添加到for循环中 [英] Event doesn't get added in a for-loop

问题描述

这是html。如果一个链接被点击，我想用一些文本替换前面的span-element。

 < 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代码中，循环遍历所有的锚元素，给它们一个点击事件，导致它前面的span元素被替换。 / p>

 < script type =text / javascript> 
 $ b $（document）.ready（function（）{
 var numSpans = $（span）。length; 
 for（n = 0; n< = numSpans; （e）{
 $（'span＃sp'+ n）.replaceWith（'this'）; $ b $（a＃update+ n）.click b e.preventDefault（）; 
}）; 
} 
}）; 
 
< / script> 
  

由于某些原因，这是行不通的。

我在做什么错了？

解决方案

原始代码的问题在于你要在变量上创建一个闭包名词。当调用事件处理程序时，在调用时调用的值是 n ，而不是声明点。您可以通过添加一个警报调用来看到：

  $（document）.ready（function（）{
 var （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： 
 
 
 < code $（$）$（$'$'$'$'$''。''）。 replaceWith（Updated that！）; 
}）; 
}）; 
  
  jsFiddle  
 
This is the html. If a link is clicked I want to replace the span-element in front of it with some text. 
<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>
As you can see, my idea was to give the spans en the anchors identical id's and a number.

In my jquery-code I loop through all the anchor-elements, give them a click-event that causes the span-element in front of it to be replaced.
<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>
For some reason this does not work.

What am I doing wrong?
解决方案
The problem with your original code is that you're creating a closure on the variable n. When the event handler is called, it is called with the value of n at the point of invocation, not the point of declaration. You can see this by adding an alert call:
$(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();
        });
    }
})
One way to fix this is to create a closure on the value of n in each iteration, like so:
$(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)
        );
    }
})
However, this is messy, and you'd do better to use a more jQuery-y method.



One way to do this would be to remove the ids from your code. Unless you need them for something else, they're not required:
<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

                        
这篇关于事件不会被添加到for循环中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！