Question

上。我试图使用javascript jQuery库将一系列事件绑定到几个div。这是我想要做的。

屏幕上会有很多div，其中id为div1 div2 div3 ... div10，依此类推。然而，只有id为'div1'的第一个div将被隐藏所有其他div隐藏。当用户将鼠标悬停在div1上时，应显示div2，当他将鼠标悬停在div 2上时，应显示div 3，这应该会持续到最后一个div。

我设法使用jQueries下一个方法提出解决方案。

$('div').each(function(){
    $(this).mouseover(function(){
        $(this).next().show();
    });
});

然而，由于我新学习javascript，我想使用FOR循环重做它，它不会工作。

for (var i=1; i<11; i++){
    $('#div' + i).mouseover(function(){
        $('#div' + (i+1)).show();
    });
}

经过一段时间的游戏后，我想，因为我正在创建一个新函数，所以'i'的值只在函数执行时解释，而不是在创建函数时解释。有人可以向我解释如何避免这种陷阱，并使用javascripts FOR循环实现jQuery.next（）的功能。感谢。

Answer 1

问题是所有div只有一个变量i，而for循环末尾的值将是11.你能做的就是

for (var i=1; i<11; i++){
    $('#div' + i).mouseover(function(){
        var index_string = $(this).attr('id').substring(3), //return, say the string '6'
            index = parseInt(index_string, 10); //convert it to a number
        $('#div' + (index+1)).show();
    });
}

一种更复杂的方法，使用匿名函数存储索引：

for (var i=1; i<11; i++){
    (function() {
        var j = i;
        $('#div' + j).mouseover(function(){
            $('#div' + (j+1)).show();
        });
    })();
}

Answer 2

当你写这样的东西时：

for (var i = 1; i < 11; i++){
    $('#div' + i).mouseover(function () {
        $('#div' + (i+1)).show();
    });
}

在您创建的每10个函数中创建一个i变量的闭包，但i变量只有一个副本，所有函数都看到相同的值（11 case因为那是结束循环的值）。它影响你让每个鼠标悬停处理程序试图显示'＃div12'，我认为它不存在。

如果你使用这样的东西，它可以工作：

for (var i = 1; i < 11; i++) {
    (function (j) {
        $('#div' + i).mouseover(function () {
            $('#div' + (j+1)).show();
        });
    }(i));
}

在此示例中，您将在每次迭代中创建一个新变量j（通过创建并立即调用带有参数j的新函数，该函数在该迭代中将采用值i ）因此，您的每个事件处理程序都可以拥有自己的正确值的版本。

我这样说只是为了解释发生了什么，因为其他人已经提供了更好的解决方案。

Answer 3

for (var i=1; i<4; i++){
        (function(j){
            $('#div' + j).mouseover(function(){           
            $(this).next().show();
            })
        }(i));
    }

Answer 4

如果您不需要（此）对象，则可以执行以下操作：

for (var i=1; i<11; i++){
    $('#div').mouseover(function(j, e){
        $('#div' + (j+1)).show();
    }.bind(null, i));
}

如果您仍然需要（此）对象

for (var i=1; i<11; i++){
    $('#div').mouseover(function(j, e){
        $('#div' + (j+1)).show();
    }.bind($('#div'), i));
}

使用FOR循环绑定事件序列

4 个答案: