0

我想要 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>
4

3 回答 3

1

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

使用属性标记所有 div：

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

根据他们的“订单”属性插入终点：

$('#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);
        }
    }
});
于 2011-08-24T01:02:57.443 回答
0

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

更新（对评论的回应）：

您可以设置您的代码，以便与有多少复选框无关。例如，您可以通过设置属性 'order' 来获取对象的索引，然后调用this.attr('order')来获取订单值并附加到$('#clickDiv' + order)。您还可以使用 ID 属性和简单的字符串操作来达到相同的效果。

于 2011-08-24T00:13:28.977 回答
0

我猜你附加到“测试”div。这种行为是合乎逻辑的。最后附加在底部。

尝试：

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

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

于 2011-08-24T00:18:37.800 回答