所以我正在做一些可以用 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
如您所见，它会滚动但未按计划进行。它以最后一张翻转图像结束，不会变回原始图像，也不会显示与其对应的适当翻转图像。
有没有不使用正则表达式的简单建议？
最佳答案
问题是循环中闭包变量的错误使用。
但是解决方案可以简化为
$(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
关于javascript - jquery 预加载带有翻转的图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20485392/