jQuery 롤오버 이미지가 작동하지 않습니다.

저는 JavaScript & jQuery : The Missing Manual (Chapter07 - rollover.html)의 연습 튜토리얼을 작업하고있었습니다. 소스 파일에 대한 링크는 http://sawmac.com/js2e/jQuery 롤오버 이미지가 작동하지 않습니다.

입니다. 지침에 따라 이미지 롤오버와 관련된 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

안녕하십니까, 문제의 해결책을 찾았습니다. 분명히 코드를 입력하는 대신 책의 pdf 파일에서이 행을 복사하여 붙여 넣습니다. "quote"문자처럼 보입니다. (아래 코드 줄을 참조하십시오.) 다음 줄을보십시오 : $ ('# gallery img'). 아래 그림과 같이 pdf 파일에 사용되는 잘못되었습니다 : > '' (아래 그림 참조) 정확한 따옴표로 대체하면, 코드가 제대로 작동하기 시작 이 >. '' 이상한 문제는, 그러나, 수업 배운 복사 붙여 넣기 대신 코드를 직접 입력하십시오. 건배 :) –

안녕하세요 j08691, 맞습니다. 나는 단지 그것을 알아 차렸다. 그것을 강조 주셔서 감사합니다. –

문제의 해결책을 찾았습니다. 아래 라인을보십시오 : $(‘#gallery img’).each(function() 분명히 코드를 타이핑하는 대신이 책의 PDF 파일에서이 라인을 붙여 넣은 &을 복사합니다. 표시된대로 "시세"문자가 pdf 파일에 사용 된 것과 같습니다. 올바른 따옴표로 바꾸면 코드가 제대로 작동하기 시작합니다. 그러나 이상한 문제는 교훈을 얻었습니다. 복사하여 붙여 넣는 대신 직접 코드를 입력하십시오.

출처

2014-11-06 21:42:57

jQuery 롤오버 이미지가 작동하지 않습니다.

답변

관련 문제