jQuery 망막 이미지 교체 루프

Question

페이지의 모든 이미지를 반복하여 "Retina ready"버전으로 대체하는 스크립트 작업을하고 있습니다. 루프는 계속 그러나 이후, 나는 첫 번째 이미지는 대체했다 테스트 환경을 설정하고 다른 사람들이하지 않았다

retinaText = "@2x"; 

$("img").each(function(){ 
    filename = $(this).attr("src"); 
    ext = "."+filename.substr((Math.max(0, filename.lastIndexOf(".")) || Infinity) + 1); 
    filesource = filename.split(ext)[0]; 
    retinaImage = filesource + retinaText + ext; 

    //check if images exists 

    $.ajax({ 
     url:retinaImage, 
     type:'POST', 
     error: function(){ }, 
     success: function(){ 
      //file exists 
      //replace image with retina ready image 
      //$(this).attr("src",retinaImage); 
     } 
    }); 
}); 

: 문제는 루프가 각 이미지를 통과 할 때,이 변수를 변경한다는 것입니다 이미지를 통해 실행하면 변수가 변경됩니다.

이미지가 다음과 같이 설정된 경우 :

<img src="image1.jpg" /> 
<img src="image2.jpg" /> 
<img src="image3.jpg" /> 
<img src="image4.jpg" /> 

을 그리고이 이미지는 같은 디렉토리에 존재합니다

<img src="image1@2x.jpg" /> 

스크립트는 "이 image4의 @ 배"로이 image4을 대체하려고 끝 왜냐하면 retinaImage 변수와 $ (이)가 변경 되었기 때문입니다.

도움을 주시면 감사하겠습니다.

Answer 1

변수를 선언하는 방식에 따라 변수가 전역 범위에 포함됩니다. 예를 들어 retinaImage은 전역 변수가되고 .each()의 각 반복에서 수정됩니다.

var 키워드를 사용하여 로컬 변수를 만듭니다. 예를 들어 :

$("img").each(function(){ 
    var filename = $(this).attr("src"); 
    var ext = "."+filename.substr((Math.max(0, filename.lastIndexOf(".")) || Infinity) + 1); 
    var filesource = filename.split(ext)[0]; 
    var retinaImage = filesource + retinaText + ext; 
    //check if images exists 

    // ADDED: keep reference to current image 
    var currentImage = $(this); 

    $.ajax({ 
     url:retinaImage, 
     type:'POST', 
     error: function(){ }, 
     success: function(){ 
      //file exists 
      //replace image with retina ready image 

      // currentImage refers to the correct image, and retinaImage refers to that image's retina URL 
      currentImage.attr("src",retinaImage); 
     } 
    }); 
}); 

지역 변수는 현재 함수 내에서뿐만 아니라 closures으로 그 범위를 유지한다.