jquery - Jquery：如何限制最大项目数？

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>

​</p>

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 个）

这是小提琴

Answer 2

只需将在#addScnt 的单击处理程序中添加新字段的代码包装在一个 if 语句中，该语句检查 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;
});