事件不会被添加到for循环中

本文介绍了事件不会被添加到for循环中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述 29岁程序员，3月因学历无情被辞！这是html。如果一个链接被点击，我想用一些文本替换前面的span-element。 that1 < a href =＃id =update1> Update1< / a> that2 < a href =＃id =update2> Update2< / a> that3 < a href =＃id =update3> Update3< / a> that4 < a href =＃id =update4> Update4< / a> that5 < a href =＃id =update5> Update5< / a> 正如你所看到的，我的想法是给锚定相同的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 $（a＃update+ n）.click（（function（k）{ return function（e）{ alert（k）; $（'span＃sp'+ k）.replaceWith （'this'）; e.preventDefault（）; } }）（n））; } }）然而，这很混乱，你最好使用更多的jQuery-y方法。一种方法是去除从你的代码中找到 id 。除非您需要它们，否则不需要： that1 ; < a href =＃class =update> Update1< / a> that2 < a href =＃class =update> Update2< / a> that3 < a href =＃class =update> Update3< / a> that4 < a href =＃class =update> Update4< / a> that5 < a href =＃class =update> Update5< / a> jQuery： }）; }）; jsFiddle This is the html. If a link is clicked I want to replace the span-element in front of it with some text. that1 <a href="#" id="update1">Update1</a>that2 <a href="#" id="update2">Update2</a>that3 <a href="#" id="update3">Update3</a>that4 <a href="#" id="update4">Update4</a>that5 <a href="#" id="update5">Update5</a>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:that1 <a href="#" class="update">Update1</a>that2 <a href="#" class="update">Update2</a>that3 <a href="#" class="update">Update3</a>that4 <a href="#" class="update">Update4</a>that5 <a href="#" class="update">Update5</a>jQuery:$(function() { $('a.update').live('click', function() { $(this).siblings('span').replaceWith("Updated that!"); });});jsFiddle 这篇关于事件不会被添加到for循环中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！上岸，阿里云！