jQuery翻转图像不起作用

Question

I was working on the practice tutorials of JavaScript & jQuery: The Missing Manual (Chapter07 - rollover.html). 我正在研究JavaScript和jQuery的实践教程：The Missing Manual（Chapter07-rollover.html）。 The link to the source files is http://sawmac.com/js2e/ 到源文件的链接是http://sawmac.com/js2e/

As per the instructions, after having entered the appropriate code for the jQuery functionality related to image rollover, there seems to be no change. 按照说明，在为与图像翻转相关的jQuery功能输入了适当的代码后，似乎没有任何变化。

When I mouse over each of the black and white images, they do not seem to pop into full color. 当我将鼠标悬停在每个黑白图像上时，它们似乎并没有全彩色弹出。

The jQuery code is: 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>

The complete html file source code is shown below: 完整的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 &amp; 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>

Appreciate if someone can advise where I am going wrong. 感谢有人可以告诉我我要去哪里错了。 Thanks! 谢谢！

Answer 1

I found the solution to the problem. 我找到了解决问题的办法。 See the line below: $('#gallery img').each(function() Apparently, I copy & pasted this line from the book's pdf file instead of typing the code. It looks like the " quote " characters used in the pdf file were incorrect as shown. Upon replacing them with the correct quotes, the code started working properly. Strange problem, however, lesson learnt. Instead of copy-pasting, type the code yourself. 参见下面的行： $('#gallery img').each(function()显然，我从书的pdf文件中复制并粘贴了此行，而不是键入代码。它看起来像pdf中使用的“ quote ”字符如图所示，文件不正确。用正确的引号替换后，代码开始正常工作。奇怪的问题，但是，经验教训。而不是粘贴粘贴，而是自己键入代码。

jQuery翻转图像不起作用

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-11-06 21:42:57

jQuery翻转图像不起作用

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-11-06 21:42:57

解决方案1
0 已采纳 2014-11-06 21:42:57