Question

我想要3个复选框，我们称之为checkbox1，checkbox2和checkbox3。

<form id="test">
<div id="startingpoint"> 
<div id="clickdiv"><input type="checkbox" id="checkbox1" value="1" />checkbox1</div>
<div id="clickdiv"><input type="checkbox" id="checkbox2" value="1" />checkbox2</div>
<div id="clickdiv"><input type="checkbox" id="checkbox3" value="1" />checkbox3</div>
</div>
<div id="endingpoint"></div>
</form>

我进行了设置，以便在选中复选框时，使用appendTo将它们从“起点”重新定位到“终点”。它工作正常。问题是，我希望他们保持按时间顺序（他们开始的顺序）。

所以...如果我选中“checkbox3”然后选中“checkbox1”，我希望结果如下：

<form id="test">
<div id="startingpoint"> 
<div id="clickdiv"><input type="checkbox" id="checkbox2" value="1" />checkbox2</div>
</div>
<div id="endingpoint">
<div id="clickdiv"><input type="checkbox" id="checkbox1" value="1" />checkbox1</div>
<div id="clickdiv"><input type="checkbox" id="checkbox3" value="1" />checkbox3</div>
</div>
</form>

但是......以appendTo的方式工作，我得到了这个（注意“checkbox3”在“checkbox1”之上）

<form id="test">
<div id="startingpoint"> 
<div id="clickdiv"><input type="checkbox" id="checkbox2" value="1" />checkbox2</div>
</div>
<div id="endingpoint">
<div id="clickdiv"><input type="checkbox" id="checkbox3" value="1" />checkbox3</div>
<div id="clickdiv"><input type="checkbox" id="checkbox1" value="1" />checkbox1</div>
</div>
</form>

我如何按时间顺序保留它们，特别是它们开始的顺序。也许appendTo不是解决方案？

对评论的回应：

<script type="text/javascript">
$(function(){
$('#test input').attr('checked', false);
$('#test input').click(function(){
    if (this.checked) {
        $(this).closest('div').hide().appendTo("#endingpoint").fadeIn(1000)
    }
    else {
        $(this).closest('div').hide().appendTo("#startingpoint").fadeIn(1000)
    }
});
});
</script>

Answer 1

我会选择使用占位符的简单解决方案，但如果你真的想要一个无限制盒子的算法，你可以这样做http://jsfiddle.net/rkw79/zCVGZ/：

使用属性标记所有div：

$('#startingpoint div.clickdiv').each(function(i,o) {
    $(o).attr('order', i);
});

根据“订单”attr：

插入终点

$('#startingpoint').delegate('div.clickdiv', 'click', function() {
    var clickeddiv = $(this).detach();
    if (clickeddiv.attr('order') == 0) {
        $('#endingpoint').prepend(clickeddiv);
    } else {
        var inserted = false;
        $('#endingpoint div.clickdiv').each(function(i,o) {
            if (clickeddiv.attr('order') < $(o).attr('order')) {
                $(o).before(clickeddiv);
                inserted = true;
                return false;
            }
        });
        if (!inserted) {
            $('#endingpoint').append(clickeddiv);
        }
    }
});

Answer 2

一个简单的解决方案是将三个空div作为端点的子节点，使用ID或其他属性来识别它们。选中复选框后，端点中相应div的html将设置为复选框html。

更新（回复评论）：

您可以设置代码，使其与多少个复选框无关。您可以通过设置属性“order”来获取对象的索引，然后调用 this.attr（'order'）来获取订单值并附加到 $（'＃clickDiv '+订单）。您还可以使用ID属性和简单的字符串操作来实现相同的效果。

Answer 3

我想你附加到“test”div。这种行为是合乎逻辑的。最后一个附加在底部。

尝试：

$('input').click(function () {
  $(this).insertAfter('#endingpoint');
);

编辑：嗯，你添加了你的脚本，我想现在你知道该怎么做了。使用“insertAfter”而不是“appendTo”

appendTo与订购，也许appendTo不是正确的用法？

3 个答案: