javascript - 获取变量的值

This question already has answers here:

JavaScript closure inside loops – simple practical example
                            
                                （44个回答）
                            
                    
                5年前关闭。
        

    

for (var i = 1; i <= 3; i++)
{
    var tmpDiv = '#difdiv' + i;
    var tmpButton = '#difButton' + i;
    $(tmpDiv).css({
        position: "absolute",
        left: 0,
        top: $('#map').position().top - 16
    });
    $(tmpDiv).css('z-index', 3000);
    $(tmpDiv).css('width', '100%');

    $(tmpButton).hover(
        function () {
            $(tmpDiv).fadeIn(200);
        }, function () {
            $(tmpDiv).fadeOut(200);
        }
    );
}

我使用此循环将悬停dif添加到可变数量的按钮中。
当我使用此代码时，每个jQuery元素都会获得“'#difdiv'+ i”。最后，每个按钮都会淡入和淡出相同的difdiv。在这种情况下，difdiv3。
我该如何访问将值赋予jQuery元素而不是变量？

最佳答案

问题是变量引用。解决它的简单方法是将循环内的内容填充到函数中并调用它。

function createButton(i) {
    var tmpDiv = '#difdiv' + i;
    var tmpButton = '#difButton' + i;
    $(tmpDiv).css({
        position: "absolute",
        left: 0,
        top: $('#map').position().top - 16
    });
    $(tmpDiv).css('z-index', 3000);
    $(tmpDiv).css('width', '100%');

    $(tmpButton).hover(
        function () {
            $(tmpDiv).stop().fadeIn(200);  //added stop
        }, function () {
            $(tmpDiv).stop().fadeOut(200); //added stop
        }
    );
}

for (var i = 1; i <= 3; i++) {
    createButton(i);
}