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元素设置数据。