Question

我遇到了一个功能问题但不确定答案是什么。我写的函数如下：

function display (array) {
for (i=0, max = array.length; i<max; i++){  
    var galleryTitle=array[i][3];
    var gallerySize=array[i][2];
    var galleryDate=array[i][1];
    var galleryDescription=array[i][4];

    $('#container').append(
        '<div id="'+array[i][0]+'" style="position: absolute;  left:'+array[i][6]+'px; top: '+array[i][7]+'px;"><a href="#"><img src=images/'+array[i][5]+'></a></div>'
    );

    $("#"+i).hover( 
        function () { 
            $(this).append('<div id="description"><b>Title: </b>'+galleryTitle+'<br /><b>Images: </b>'+gallerySize+'<br /><b>Date: </b>'+galleryDate+'<br /><br />'+galleryDescription+'</div>');
        },      
        function () { 
            $(this).find("div:last").remove(); 
        } 
    );
}
}

我正在尝试做的是，只要该特定缩略图悬停在其上，就会出现一个css框，其中包含缩略图信息。

信息以及缩略图的URL确实存储在脚本开头的数组中。

上面的代码工作，css框出现除了我悬停在哪个拇指上，只显示有关for循环的最后一次迭代（是正确的单词？）所识别的缩略图的信息。

我明白为什么会发生这种情况（即循环在悬停语句生成时完成，所以'我'将始终设置为最后一个值）但我无法弄清楚该做什么它。我已经尝试在第一个div中插入由id调用的get元素，但这似乎只是淘汰了整个脚本。

我很高兴将这个剧本全部发布到这里，如果这有帮助但我想到了; d只需先用最小的打击你就可以了。

我应该提出哪些想法？

Answer 1

如果用jQuery的for函数替换你的$.each()循环，它应该解决问题，不是因为$.each()有什么神奇之处，而是因为它封装了循环的每个迭代单独的函数调用，这意味着您的变量galleryTitle和其他函数将在单独的闭包中捕获，从而在循环结束后保留其正确的值。（如果您不确定闭包是如何工作的，那么适用于此代码的最简单的解释是，即使在包含该函数的函数之后，您传递给.hover()的内部函数仍然可以访问其包含范围内的变量。范围退出。）尝试：

function display (array) {
    $.each(array, function(i, val){ 
        var galleryTitle=val[3],
            gallerySize=val[2],
            galleryDate=val[1],
            galleryDescription=val[4];

        $('#container').append(
            '<div id="'+array[i][0]+'" style="position: absolute;  left:'+array[i][6]+'px; top: '+array[i][7]+'px;"><a href="#"><img src=images/'+array[i][5]+'></a></div>'
        );

        $("#"+i).hover( 
            function () { 
                $(this).append('<div id="description"><b>Title: </b>'+galleryTitle+'<br /><b>Images: </b>'+gallerySize+'<br /><b>Date: </b>'+galleryDate+'<br /><br />'+galleryDescription+'</div>');
            },      
            function () { 
                $(this).find("div:last").remove(); 
            } 
        );
    });
}

请注意，$.each()函数使用两个参数调用您提供的函数，即当前“循环”索引和该索引处数组元素的当前值。这意味着您可以在函数中将array[i]替换为val（或者您调用该参数的任何内容 - 我称之为val） - 尽管array[i]也会起作用：我改变了前几个，所以你可以看到它会是什么样的......

试图让jquery悬停在图像阵列上工作

1 个答案: