Question

第一个输入字段用于人名，然后出现三个字段，用户输入成分名称，价格和百分比。

但是，如果您在三个输入字段中的一个内部单击并导航而不输入任何内容，则会出现另外一行三个字段。

如何进行更改以便在以前的三个字段中输入内容时只添加更多字段？

如果我要将在田间提交的信息添加到ul成分中，我将如何这样做？

            $(document).ready(function () {

                $(document).on("focusout", ".ration, .percentage", function () {

                    var count = $('.newtextbox').length;
                    var percent = 0;

                    $(".percentage").each(function (i) {

                        var pc = parseInt($(this).val().replace(/%/g, ""));

                        if (!isNaN(pc)) {
                            percent += pc;
                        } 
                    });

                    if (percent == 100) {
                        alert('You Have Reached 100%');
                    } else if (percent > 100)  {
                        alert('You Are Over 100%');
                    }  else if (count < 10) {
                        $(content).append("<p><input type='text' class='newtextbox' id='ingredient" + count + "' placeholder='ingredient name'/> <input type='text' class='costPerTon' placeholder='cost per ton'/> <input type='text' class='percentage' placeholder='percent applied'/> <input type='button' value='Remove' id='removeButton" + count + "'/></p>");
                    } else {
                        alert('You have maximum elements allowed.')
                    }

                    $("input[type = 'button']").click(function () {
                        $(this).parent().remove();
                    });
                });
            });

http://jsfiddle.net/edwinakatosh/6YqL8/

Answer 1

因为：

else if (count < 10) {

将其更改为：

else if (count < 1) {

EXAMPLE

Answer 2

您可以检查字段的值是否为空，我已更新您的小提琴：http://jsfiddle.net/6YqL8/14/。

$(this)是触发事件的元素的jQuery快捷方式，.val()返回输入字段的值

if ($(this).val() !== '') {
    $(content).append("<p><input type='text' class='newtextbox' id='ingredient" + count + "' placeholder='ingredient name'/> <input type='text' class='costPerTon' placeholder='cost per ton'/> <input type='text' class='percentage' placeholder='percent applied'/> <input type='button' value='Remove' id='removeButton" + count + "'/></p>");
}

jQuery只在输入字段中输入内容时添加新字段

2 个答案: