1

ユーザーが必要に応じてフィールドセットを追加/削除できるようにしたいと考えています。

これが私が思いついたコードです：

jquery 部分:

$("#inputRow1").hide();
$("#inputRow2").hide();
$("#remove-last").hide();

$("#add-more").click(function(){

    //count how many *direct children* elements are hidden.
    var hiddenElements = $('#members >:hidden').length;

    $("#remove-last").show();    

    if (hiddenElements === 2) {
        $("#inputRow1").show();
    } else if(hiddenElements === 1) {
        $("#inputRow2").show();
        $(this).hide();
    }
});

$("#remove-last").click(function(){

    //count how many *direct children* elements are hidden.
    var hiddenElements = $('#members >:hidden').length;
    $("#add-more").show();    

    if (hiddenElements === 0) {
        $("#inputRow"+2).hide();
    } else if (hiddenElements === 1) {
         $("#inputRow"+hiddenElements).hide();
        $(this).hide();
    }

});

HTML 部分 (サーバー側で生成):

<div id="members">
    <div id="inputRow0">
        <input id="input0_0" class="input" type="text" /><br/>
        <input id="input0_1" class="input" type="text" /><br/>
        <input id="input0_2" class="input" type="text" />
    </div>
    <div id="inputRow1">
        <input id="input1_0" class="input" type="text" /><br/>
        <input id="input1_1" class="input" type="text" /><br/>
        <input id="input1_2" class="input" type="text" />
    </div>
    <div id="inputRow2">
        <input id="input2_0" class="input" type="text" /><br/>
        <input id="input2_1" class="input" type="text" /><br/>
        <input id="input2_2" class="input" type="text" />
    </div>
</div>  
<br /><a id="add-more" href="#">add-more</a> <a id="remove-last" href="#">remove-last</>

リンク: http://jsfiddle.net/URkuW/

彼のコードが機能していることは承知していますが、非常に単純です。

より良い/より短い/より包括的/より再利用可能な/それを行う方法はありませんか? :D

4

2 に答える 2

2

これが私のやり方です：http://jsfiddle.net/URkuW/7/

inputRowあなたの「行」にクラスを追加しました

function updateVisibility(){
    var cnt = $('#members .inputRow:visible').length;
    $('#add-more').toggle(cnt < 3);
    $('#remove-last').toggle(cnt > 1);
}

$("#inputRow1").hide();
$("#inputRow2").hide();
updateVisibility();

$("#add-more").click(function(){
    $('#members .inputRow:hidden').first().show();
    updateVisibility();
});

$("#remove-last").click(function(){
    $('#members .inputRow:visible').last().hide();
    updateVisibility();
});
于 2013-04-23T14:48:16.727 に答える