jQuery Rollover Image Not Working

我正在研究JavaScript的练习教程& jQuery：缺失手册（Chapter07 - rollover.html）。到源文件的链接是http://sawmac.com/js2e/jQuery Rollover Image Not Working

按照说明，在输入了与图像翻转相关的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 &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>

感激，如果有人可以告诉我要去的地方错了。谢谢！

来源

2014-01-10 fr_muses

用你的报价''（'＃gallery img'）' – j08691

嗨大家好，我找到了问题的解决方案。看到下面这行： $（'＃gallery img'）。each（function（）显然，我从书的pdf文件中复制并粘贴了这行代码，而不是键入代码，它看起来像“quote”字符在PDF文件中使用是不正确的，如下图所示： >' 在用正确的引号（如下图所示）替换它们，代码开始正常工作 >。' 奇怪的问题，但是，我们的教训。而不是复制粘贴，自己输入代码干杯:) –

嗨j08691，你是对的。我只是注意到了它。感谢您也强调它。 –

我找到了解决问题的办法。看到下面的行：$(‘#gallery img’).each(function()显然，我复制&从本书的pdf文件粘贴此行，而不是键入代码。它看起来像PDF文件中使用的“报价”字符不正确，如图所示。在用正确的引号替换它们后，代码开始正常工作。奇怪的问题，但是，经验教训。代替复制粘贴，请自己输入代码。

来源

2014-11-06 21:42:57

jQuery Rollover Image Not Working

回答

相关问题