jQuery - 다른 함수에서 첫 번째 함수의 변수를 사용해야합니까?

Question

우버 멍청한 놈 그러나 나는 내가 가까웠다 고 생각했다.

var markers = $j('span.marker'); 

$j(markers).each(function() { //function to store original marker positions 
    var startOrigin = $j(this).css('margin-left'); 

}); 

$j("a.timeline-view").click(function() { //function to return markers to stored positions 
    $j(markers).each(function() { 

     $j(this).animate({ 
      marginLeft: startOrigin 
     }) 

    }); 
}); 

두 번째 함수는 var을 찾을 수 없습니다 ??

Answer 1

나는 문제에 대한 JQuery와

솔루션에 대한 별칭 요소에 바인딩 된 값을 저장 한 후 필요할 때 .data('name')로를 검색 할 JQuery와 .data('name', val)을 사용하고 있습니다 ==이 $ j를 가정합니다.

$j(markers).each(function(){ //function to store original marker positions 

     $j(this).data('startOrigin', $j(this).css('margin-left')); 

}); 

$j("a.timeline-view").click(function() { //function to return markers to stored positions 
    $j(markers).each(function(){ 
     var marker = $j(this); 
     marker.animate({marginLeft : marker.data('startOrigin') }) 
    });   
}); 

코드가 작동하지 않는 이유를 설명하기 위해 jQuery를 데이터

Answer 2

사용에 대한 자세한 정보를 확인 http://api.jquery.com/jQuery.data/ ...

자바 스크립트에서 함수는 범위에있다

포함에 선언 된 모든 변수 함수 또는 그 함수에서. var 키워드를 사용하면 변수를 현재 범위로 설정합니다. 귀하의 예에서 startOrigin은 첫 번째 기능의 범위에만 해당됩니다. 상위 범위에 넣을 경우, 예에서 모든 기능은 그 범위에있을 것이다 : 그러나

var markers = $j('span.marker'); 
var startOrigin; // declare the variable in this scope 

markers.each(function() { //function to store original marker positions 
    startOrigin = $j(this).css('margin-left'); // use the parent scope 
}); 

$j("a.timeline-view").click(function() { //function to return markers to stored positions 
    markers.each(function() { 

     $j(this).animate({ 
      marginLeft: startOrigin // use parent scope 
     }) 

    }); 
}); 

참고,이 예제는 가지 어쨌든 파괴된다. 매번 startOrigin을 덮어 쓰면서 전체 마커 세트를 반복합니다. Tom Thu가 his answer에서 말한대로 data을 사용하여 개별 DOM 요소에 대한 데이터를 설정해야합니다.