0

3 つのチェックボックスが必要です。チェックボックス 1、チェックボックス 2、およびチェックボックス 3 と呼びましょう。

<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 を使用して「開始点」から「終了点」に移動するように設定しました。正常に動作しています。問題は、それらを時系列にとどめたいということです（開始した順序）。

SO ...「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

簡単な解決策は、エンドポイントの子として 3 つの空の 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');
);

編集：さて、スクリプトを追加しました。これで、何をすべきかがわかったと思います。「appendTo」の代わりに「insertAfter」を使用する

于 2011-08-24T00:18:37.800 に答える