Question

我的jsp页面中有javascript函数

<script type="text/javascript">
$(document).ready(function(){
for(i=0; i<20; i++ ) {
$(".plus"+i).click(function(){
    $(".details"+i).slideToggle(500)
    });
}
});

对于每次迭代我想要输出如下：

.plus0 .details0

下一次迭代：

.plus1 .details1等。但这不起作用。请帮忙。

Answer 1

控制台中没有错误。问题是，当click处理程序被触发时，for()循环已经完成，因此i将始终等于19。

您可以使用jQuery中的事件数据来规避此行为。您可以按如下方式更新代码：

$(function() {
    for( i = 0; i < 20; i++ ) 
    {
        $('.plus' + i).click( { theIndex : i }, function(e) {
            $('.details' + e.data.theIndex).slideToggle(500)
        });
    }
});

Answer 2

问题是由于您正在使用闭包引起的。 i的引用由click事件处理程序保存。因此，所有事件处理程序都可以看到i的最新值。

要解决此问题，请编写一个返回事件处理程序的工厂函数。

var createEventHandler = function (param1) {
    return function (e) {
       $(".plus"+param1).click(function(){
           $(".details"+param1).slideToggle(500)
       });
    } 
}

$(document).ready(function(){
    for(i=0; i<20; i++ ) {
       $(".plus"+i).click(createEventHandler(i));
    }
});

了解闭包变量。

在JS中使用循环索引值

2 个答案: