Question

我正在尝试限制插入页面的元素：

<script type="text/javascript">
    $(function() {

        var i = 1;
//allow only 3 elements
        if (i < 4) {

            $('#add').click(function() {
                var add_input = '<input type="file" />'
                var add_link = '<a href="#" class="remove">Remove</a>'
                $('body').append('<p>' + add_input + add_link + '</p>');
            });

            i++;
        }

        $('.remove').live('click', function() {
            $(this).parent('p').remove();
        });


    });
</script>

但我仍然可以添加超过4的元素。

Answer 1

您需要在事件处理程序中检查变量i。

$('#add').click(function() {
    if(i < 4){
       var add_input = '<input type="file" />'
       var add_link = '<a href="#" class="remove">Remove</a>'
       $('body').append('<p>' + add_input + add_link + '</p>');
       i++;
    }
});

您应该在i处理程序中减少live()。

查看一个工作示例：http://jsfiddle.net/CtGgg/

Answer 2

您可以计算页面上已有的元素数量，并以此方式限制它。就个人而言，我喜欢将DOM本身视为用户状态的规范表示。如果这对你很重要，你可以做类似下面的事情，即使它的性能稍差：

$('#add').live('click', function (evt) {
    if ($('input[type=file]').length < 4) {
        $('body').append('<p><input type="file"> <a href="#" class="remove">Remove</a></p>');
    }
    evt.preventDefault();
});

限制将元素插入页面

2 个答案: