jQuery - 需要從另一個函數內的第一個函數使用變量？

Question

優步Noob，但我認爲我很接近。

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

我認爲附加$ J ==別名jquery的

的解決問題的方法是使用jQuery .data('name', val)存儲綁定到一個元素的值，然後用.data('name')檢索需要的時候。

$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') }) 
    });   
}); 

檢查http://api.jquery.com/jQuery.data/更多信息使用jQuery的數據

Answer 2

要解釋爲什麼您的代碼不起作用......

在JavaScript函數範圍包含已聲明的所有變量功能或在該功能。使用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。您需要使用data，如Tom Tu在his answer中所述，爲單個DOM元素設置數據。