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

好的，我将克隆的数字附加到相同的 ol 列表中仍然存在问题：/

希望你能理解并能帮助我一点。谢谢！

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 回答