Нужно использовать переменную из первой функции внутри другой функции?

Question

Uber 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
        })

    });
});

Вторая функция не может найти переменную ??

Answer 1

Чтобы объяснить, почему ваш код не работает ...

Функция в 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, как сказал Том Ту в его ответ , чтобы установить данные для отдельного элемента DOM.

Answer 2

Я предполагаю, что $ 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