jQuery只在输入的%小于100%时添加一行

Question

我尝试过，但有错误，但只有当输入的百分比不是100%时，字段才会出现。例如，如果我在第一个百分比输入字段中输入22%，在第二个百分比输入域中输入78%，则警报应表示百分比已达到100%。但如果未达到100%，则应继续添加输入字段，直到它们加起来达到100%

                $(document).ready(function () {
                $(document).on("focusout", ".ration, .percentage", function () {
                    var count = $('.newtextbox').length;
                    if (count < 5) {
                        $(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/z2FdP/

Answer 1

您的示例不起作用，因为查询$（内容）是错误的。我想这里一定是$（"#content"）。

Answer 2

将答案应用于您的特定示例/Fiddle:

$(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('Reached 100%');
        }
        else if (percent > 100)
        {
            alert('Oops, you are over 100%');
        }
        else if (count < 5) {
            $('#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/F76Tk/

Answer 3

据我所知，您的问题是如何计算在所有输入中输入的总数%。

以下是您的操作方法：

var totalPercents = 0;
$("input").each(function (i, input) {
    var percent = $(input).val().replace(/%/g, "");
    if (!isNaN(percent)) {
         totalPercents += parseInt(percent);
    }
});

Fiddle

我相信你会弄清楚如何将其应用于你的代码：）

Answer 4

试试这样的东西：

$('button').on('click', function () {
    var current_percent_sum = $('.value').get().map(function (value) {
        return $(value).data('value')
    }).reduce(function (sum, value) {
        return sum + value;
    }, 0);
    var pending_percent = +($('.percent').val());
    if (current_percent_sum + pending_percent <= 100) {
        $('body').append('<div class="value" data-value="'+ pending_percent +'">' + pending_percent + '</div>')
    } else {
        alert('You can only enter a max of ' + (100 - current_percent_sum));
    }
});

Fiddle