1

我已经尝试过并且有错误，但只有当输入的百分比不是 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/

4

4 回答 4

1

您的示例不起作用，因为查询 $(content) 是错误的。我想这里必须是 $("#content")。

于 2013-07-04T11:25:24.837 回答
0

尝试这样的事情：

$('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));
    }
});

小提琴

于 2013-07-04T11:25:14.410 回答
0

据我了解，您的问题是如何计算所有输入中输入的总百分比数。

下面是你如何做到这一点：

var totalPercents = 0;

$("input").each(function (i, input) {
    var percent = $(input).val().replace(/%/g, "");

    if (!isNaN(percent)) {
         totalPercents += parseInt(percent);
    }

});

小提琴

我相信您会弄清楚如何将其应用于您的代码:)

于 2013-07-04T11:20:55.690 回答
0

将答案应用于您的特定示例/小提琴：

$(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/

于 2013-07-04T11:32:34.950 回答