我正在研究JavaScript& amp;的练习教程。 jQuery:The Missing Manual(Chapter07 - rollover.html)。源文件的链接是http://sawmac.com/js2e/
根据说明,在输入与图像翻转相关的jQuery功能的相应代码之后,似乎没有任何变化。
当我将鼠标悬停在每张黑白图像上时,它们似乎不会变成全彩色。
jQuery代码是:
<script>
$(document).ready(function() {
$(‘#gallery img’).each(function() {
var imgFile = $(this).attr('src');
var preloadImage = new Image();
var imgExt = /(\.\w{3,4}$)/;
preloadImage.src = imgFile.replace(imgExt,'_h$1');
$(this).hover(
function() {
$(this).attr('src',preloadImage.src);
},
function() {
$(this).attr('src',imgFile);
}
);// end hover
});// end each
}); // end ready
</script>
完整的html文件源代码如下所示:
<body>
<div class="wrapper">
<div class="header">
<p class="logo">JavaScript <i>&</i> jQuery <i class="mm">The<br>Missing<br>Manual</i></p>
</div>
<div class="content">
<div class="main">
<h1>Rollover Images</h1>
<p>Mouse over the images below</p>
<div id="gallery"> <a href="../_images/large/blue.jpg"><img src="../_images/small/blue.jpg" width="70" height="70" alt="blue"></a> <a href="../_images/large/green.jpg"><img src="../_images/small/green.jpg" width="70" height="70" alt="green"></a> <a href="../_images/large/orange.jpg"><img src="../_images/small/orange.jpg" width="70" height="70" alt="orange"></a> <a href="../_images/large/purple.jpg"><img src="../_images/small/purple.jpg" width="70" height="70" alt="purple"></a> <a href="../_images/large/red.jpg"><img src="../_images/small/red.jpg" width="70" height="70" alt="red"></a> <a href="../_images/large/yellow.jpg"><img src="../_images/small/yellow.jpg" width="70" height="70" alt="yellow"></a></div>
</div>
</div>
<div class="footer">
<p>JavaScript & jQuery: The Missing Manual, by <a href="http://sawmac.com/">David McFarland</a>. Published by <a href="http://oreilly.com/">O'Reilly Media, Inc</a>.</p>
</div>
</div>
</body>
感谢有人可以告诉我哪里出错了。谢谢!
答案 0 :(得分:0)
我找到了问题的解决方案。请参阅下面的一行:$(‘#gallery img’).each(function()
显然,我复制&amp;从书的pdf文件中粘贴这一行而不是输入代码。它看起来像&#34; 引用&#34; pdf文件中使用的字符不正确,如图所示。在用正确的引号替换它们后,代码开始正常工作。然而,奇怪的问题,经验教训。而不是复制粘贴,自己键入代码。