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

回答

相關問題