0

作成する必要があるシナリオは次のとおりです。

数字の OL リスト (1,2,3,4,5,6) があります。ユーザーはそれらの番号を選択/クリックできます。クリックすると、番号が別の OL リストに移動するはずです (アニメーションで、番号が画面上を飛びます)。新しいリストでは、番号は常に順序どおりになっている必要があります。したがって、ユーザーが最初の 5 をクリックすると、コピーして新しいリストに飛びます。次にユーザーが番号 1 をクリックすると、飛んで 5 の前に移動する必要があります。したがって、新しいリスト番号は、問題なく 1,3,5 のようになります。ユーザーが数字をクリックした順序。

わかりました、それが私が達成したいことです。基本的に私は最初の部分を行うことができます (ユーザーが数字をクリックする -> 新しいリストに飛びます) が、常に順番に数字を取得するにはどうすればよいですか?

これまでのJS：

$('ol#original li').click(function() {
        $(this).clone().appendTo('ol#newNumbers');

        $('ol#original:last').animate({
            left: "150px",
            position: "relative",
            top: "150px",
        }, 600);
    });

OK、クローンした番号を同じ古いリストに追加するという問題がまだあります:/

うまくいけば、あなたが理解し、私を少し助けることができます. ありがとうございました！

4

1 に答える 1

0

<li>迅速かつ簡単な解決策は、他に空の束を作成してから<ol>使用すること$.replaceWith()です。別の解決策は<li>、並べ替え順序を維持するデータ属性をそれぞれに与えることです。

(ほとんどの場合、最初のオプションで問題ありません)

編集: http://jsfiddle.net/wA4ex/

/*create empty li's in newlist*/
for (var i=0; i < $('#oglist li').length; i++) {
    $('<li></li>').hide().appendTo($('#newlist'));
}

$('#oglist li').click(function(e) {
    var li = $(this),
        index = li.index(),
        clone = li.clone();
    $('#newlist li').eq(index).replaceWith(clone);
});

主なコンセプトは、プレースホルダーを使用して順序を維持することです。

于 2012-08-14T07:27:37.093 に答える