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 回答
1

我已经修改了您的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</>

查询：

$(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();
}
});
于 2013-04-23T13:41:41.970 回答