Question

我们希望允许用户根据需要添加/删除字段集。

以下是我提出的代码：

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

Answer 1

以下是我的评论：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();
});

Answer 2

我已经修改过你的 JQuery代码，如下所示，

小提琴演示： http://jsfiddle.net/URkuW/5/

CSS：

.divShow
{
    display: block;
}
.divHide
{
    display: none;
}

HTML：

<div id="members">
    <div id="inputRow0" class="divShow">
        <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" class="divHide">
        <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" class="divHide">
        <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="#" class="divHide">remove-last</>

JQuery：

$(document).ready(function() {
var tot = $('div[id^="inputRow"]').length;
$("#add-more").click(function() {        
    $('div[id^="inputRow"]:hidden:first').show();    
    ShowHide();
});
$("#remove-last").click(function() {
    $('div[id^="inputRow"]:visible:last').hide();
    ShowHide();;
});
function ShowHide()
{
    var vislen = $('div[id^="inputRow"]:visible').length;
    if(vislen>1)
        $("#remove-last").show();
    else
        $("#remove-last").hide();
    if(vislen == tot)
        $("#add-more").hide();
    else
        $("#add-more").show();
}
});

如何使用Jquery添加/删除字段集 - 更好的例子

2 个答案: