jquery 롤오버가 포함 된 사전로드 된 이미지

CSS로 수행 할 수있는 기본적인 작업을 수행하고 있지만 jQuery로 라이브러리에 익숙해지고 싶습니다.jquery 롤오버가 포함 된 사전로드 된 이미지

롤오버 이미지 갤러리를 만들려고합니다. 이미지 위로 마우스를 가져 가면 약간 수정 된 버전으로 스왑됩니다. 여기에 최종 결과에 대한 링크가

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>jQuery</title> 
<script src="jquery-1.9.1.js"></script> 
<style> 

</style> 
</head> 
<body> 
<div id="gallery"> 
    <a href="#"><img src="images/one_s.jpg" /></a> 
    <a href="#"><img src="images/two_s.jpg" /></a> 
    <a href="#"><img src="images/three_s.jpg" /></a> 
    <a href="#"><img src="images/four_s.jpg" /></a> 
    <a href="#"><img src="images/five_s.jpg" /></a> 
    <a href="#"><img src="images/six_s.jpg" /></a> 
</div> 
<script> 
$(document).ready(function(){ 

    var alternate = ['images/one_s_edited.jpg', 
        'images/two_s_edited.jpg', 
        'images/three_s_edited.jpg', 
        'images/four_s_edited.jpg', 
        'images/five_s_edited.jpg', 
        'images/six_s_edited.jpg']; 

    var $selection = $("#gallery img"); 

    for(var i = 0; i < alternate.length; i++) 
    { 

     var imgObject = new Image(); 

     var downloadedImg = imgObject.src = alternate[i]; 

     console.log(downloadedImg); 

     var originalSrc = $selection.eq(i).attr("src"); 

     console.log(originalSrc + "\n"); 

     $selection.eq(i).hover(
      function(){ 
       $(this).attr("src", downloadedImg); 
      }, 
      function(){ 
       $(this).attr("src", originalSrc); 
      } 
     );//End hover 

    }//End loop 
});//End ready 
</script> 
</body> 
</html>

: 여기

코드입니다 link

당신이 계획대로이 이상하지만 롤 볼 수 있듯이. 마지막 롤오버 이미지로 끝나고 원래대로 되돌아 가지도 않고 롤오버 이미지와 일치하는 적절한 롤오버 이미지도 표시되지 않습니다.

정규 표현식을 사용하지 않고 간단한 제안 사항이 있습니까?

출처

2013-12-10 Robert Rocha

답변을 단순화 할 수는 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures#Creating_closures_in_loops.3A_A_common_mistake 내에있는 –

클래식 같은 클로저가 같은 변수를 공유하는 문제. 스택 오버플로에 대해 약 백만 복제. 다운로드 한 Img와 originalSrc의 고유 한 복사본을 각 반복에 제공해야합니다. – meagar

@ArunPJohny 아니오 기사 주셔서 감사합니다. 100 % –

문제는 루프에서 클로저 변수를 잘못 사용하는 것입니다.

그러나이 솔루션은

$(document).ready(function() { 
    var $selection = $("#gallery img"); 
    $selection.hover(function() { 
     this.src = this.src.replace('.jpg', '_edited.jpg') 
    }, function() { 
     this.src = this.src.replace('_edited.jpg', '.jpg') 
    }) 
}); //End ready

출처

2013-12-10 03:30:04

선택 사항의 모든 요소에 이것을 어떻게 바인딩합니까? –

@robertrocha 미안해. 너를 못 얻었 어. 너 뭐하고 싶어? –

마우스를 올리면 이벤트 핸들러를 모든 다른 이미지에 바인딩하는 방법은 무엇입니까? –

jquery 롤오버가 포함 된 사전로드 된 이미지

답변

관련 문제