Question

所以我正在做一些非常基本的事情，可以用CSS完成，但我想用jQuery来熟悉这个库。

我正在尝试创建翻转图片库。当您将鼠标放在图像上时，它将与稍微编辑的版本进行交换。

以下是代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery</title>
<script src="jquery-1.9.1.js"></script>
<style>

</style>
</head>
<body>
<div id="gallery">
    <a href="#"><img src="images/one_s.jpg" /></a>
    <a href="#"><img src="images/two_s.jpg" /></a>
    <a href="#"><img src="images/three_s.jpg" /></a>
    <a href="#"><img src="images/four_s.jpg" /></a>
    <a href="#"><img src="images/five_s.jpg" /></a>
    <a href="#"><img src="images/six_s.jpg" /></a>
</div>
<script>
$(document).ready(function(){

    var alternate = ['images/one_s_edited.jpg',
                    'images/two_s_edited.jpg',
                    'images/three_s_edited.jpg',
                    'images/four_s_edited.jpg',
                    'images/five_s_edited.jpg',
                    'images/six_s_edited.jpg'];

    var $selection = $("#gallery img");

    for(var i = 0; i < alternate.length; i++)
    {

        var imgObject = new Image();

        var downloadedImg = imgObject.src = alternate[i];

        console.log(downloadedImg);

        var originalSrc = $selection.eq(i).attr("src");

        console.log(originalSrc + "\n");

        $selection.eq(i).hover(
            function(){
                $(this).attr("src", downloadedImg);
            },
            function(){
                $(this).attr("src", originalSrc);
            }
        );//End hover

    }//End loop
});//End ready
</script>
</body>
</html>

以下是最终结果的链接：link

正如您所看到的那样，它会翻滚，但不会按计划进行。它以最后一个翻转图像结束，不会更改回原始图像，也不会显示与其对应的相应翻转图像。

没有使用正则表达式的任何简单建议？

Answer 1

问题是在循环中错误地使用了闭包变量。

但是解决方案可以简化为

$(document).ready(function () {
    var $selection = $("#gallery img");
    $selection.hover(function () {
        this.src = this.src.replace('.jpg', '_edited.jpg')
    }, function () {
        this.src = this.src.replace('_edited.jpg', '.jpg')
    })
}); //End ready

jquery使用翻转预加载图像

1 个答案: