2013-02-17 2 views
1

Я пытаюсь анимировать некоторые divs из исходного местоположения в другие места.Строка и объект JavaScript в массиве

Для этого я адаптируя код с этой скрипкой:

http://jsfiddle.net/c6UEm/27/

Код, у меня есть:

function animate(list, lft, top, callback) { 

alert('list: '+list); 

if (list.length === 0) { 
    callback(); 
    return; 
} 
$el = list.shift();   // div ids 
var lll = lft.shift(); // new value for left of this div (from lft array) 
var ttt = top.shift(); // new value for top of this div (from top array) 
$el.animate({"left": +lll+'px', "top": +ttt+'px'}, 1000, function() { 
    animate(list, lft, top, callback); 
}); 
} 

Если я жесткий код 'список' (Div идентификаторами) следующим образом;

 $('#TDA0mv'),$('#TDA1mv'),$('#TDA2mv'),$('#TDA3mv'),$('#TDA4mv'),$('#TDA5mv'),$('#TDA6mv'),$('#TDA7mv'),$('#TDA8mv') 

приведенное выше предупреждение производит это;

list: [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object] 

который работает по мере необходимости.

Если я извлекаю идентификаторы из скрытого поля и строю массив (или даже строку, которая затем разделяется), у меня это;

  $('#TDA0mv'),$('#TDA1mv'),$('#TDA2mv'),$('#TDA3mv'),$('#TDA4mv'),$('#TDA5mv'),$('#TDA6mv'),$('#TDA7mv'),$('#TDA8mv') 

который в вызове выше предупреждение:

list:$('#TDA0mv'),$('#TDA1mv'),$('#TDA2mv'),$('#TDA3mv'),$('#TDA4mv'),$('#TDA5mv'),$('#TDA6mv'),$('#TDA7mv'),$('#TDA8mv') 

Естественно, это не работает.

Есть ли у кого-нибудь какие-либо идеи относительно того, почему кажущиеся идентичными объекты данных настолько различны? Я подозреваю, что это, возможно, вещь типа JSON, так как на это отвечает ряд «похожих» запросов. Однако, попробовав пару вещей в этом направлении, я все еще, кажется, получаю строки, а не «объекты».

+1

форматировать Пожалуйста, ваши образцы кода – kirugan

+1

Пожалуйста, обновите скрипку, чтобы показать пример того, как вы «получение идентификаторов из скрытого поля и построить массив» –

+1

Кроме того, используйте имена описательных переменных. lll и ttt не являются хорошими именами переменных, если вы хотите, чтобы другие могли читать и помогать вам с вашим кодом. –

ответ

1

Вы не объясняете, как вы передаете идентификаторы, но вы не можете просто использовать <input type="hidden" value="$('#id')" />, потому что он будет интерпретироваться как текст, а не как объект JQuery.

Вы могли бы сделать так: http://jsfiddle.net/c6UEm/28/

<body> 
    <div id="container"> 
    <div id="one" class="box"></div> 
    <div id="two" class="box"></div> 
    <div id="three" class="box"></div> 
    </div> 
    <!-- Create an input field--> 
    <input type="hidden" id="list" value=""/> 
</body> 

$(document).ready(function() { 
    //Assign id values 
    $('#list').val('one,two,three'); 

    //Pass the list to your function 
    animate($('#list').val().split(','), finished); 
}); 

function finished() { 
    $('body').append('Finished'); 
} 

function animate(list, callback) { 
    if (list.length === 0) { 
     callback(); 
     return; 
    } 

    //Use id to use with JQuery 
    $el = $('#' + list.shift()); 
    $el.animate({left: '+=200',top: '-=10'}, 1000, function() { 
     animate(list, callback); 
    }); 
}