Question

我设置了一个Jquery表单，我可以在其中添加和删除字段：http://jsfiddle.net/beehive/TLJGb/

我不希望能够在此表单上添加超过10个字段。我怎么能做到这一点？

$(function() {
    var scntDiv = $('#p_scents');
    var i = $('#p_scents p').size() + 1;
    $('#addScnt').live('click', function() {
        $('<p id="yum">beets ' + i + ' <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
        i++;
        return false;
    });
    $('#remScnt').live('click', function() {
        if (i > 2) {
            $(this).parents('p').remove();
            i--;
        }
        return false;
    });
});

HTML：

<h2><a href="#" id="addScnt">Add Another</a></h2>

<div id="p_scents">
    <p id="yum">
        beets
    </p>
</div>

Answer 1

将以下if语句添加到您的代码中......

$('#addScnt').live('click', function() {

    if ($(".item", addScnt).length < 9) {
        $('<p class="item" id="yum">beets ' + i +' <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
        i++;
    }
        return false;
});

首先我在项目中添加了一个类，以便我可以检测它们。然后我可以计算，如果少于9（+你已经有的那个10）

以下是Fiddle

Answer 2

只需在if语句中包含在#addScnt的点击处理程序中添加新字段的代码，该语句检查i是否小于或等于10.

或者换句话说：

$('#addScnt').live('click', function() {
    if (i <= 10) {
        $('<p id="yum">beets ' + i + ' <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
        i++;
    }
    return false;
});

Jquery：如何限制最大数量的项目？

2 个答案: