当添加不同的值时，如何使用jQuery来添加分段的表单字段并进行更新？

Question

在我的表单中，我为每个表单字段划分了多个表单字段（1、2等），我将这些值相加并在每个部分的最后一个字段中显示总计，但是如果用户输入“ 5”然后将其删除并输入0，则5仍会添加到最终分数中，我不确定如何允许更改值以使它们摆脱旧值。

当前方式是：

User adds value 5;
5 += final section field total;
User removes 5, instead puts 0;
final section field total = 5;

我正在使用的代码如下

var form_inputs = document.getElementsByTagName("input");

$.each(form_inputs, function(i){
    if($(form_inputs[i]).attr("type") == "hidden"){ return false; }
        $(form_inputs[i]).attr("type", "number");
        $(form_inputs[i]).attr("required", "true");
        $(form_inputs[i]).change(function(){
            if(i === 0 || i < 6){

                if(check_valid_pt($(this).uniqueId(), $(this).val())){
                    addValues(attempt, parseInt($(this).val()), i);
                } else {
                    alert("Please only enter 0, 4 or 5");
                    $(this).val("");
                }

            } else if(i > 20 && i < 39){

                if(check_valid_sr($(this).uniqueId(), $(this).val())){
                    addValues(attempt, parseInt($(this).val()), i);
                } else {
                    alert("Please only enter 0 or 5");
                    $(this).val("");
                }

            } else if(i > 59 && i < 78){

                if(check_valid_wfr($(this).uniqueId(), $(this).val(), "")){
                    addValues(attempt, parseInt($(this).val()), i);
                } else {
                    alert("Please only enter 0 or 5");
                    $(this).val("");
                }

            } else if(i > 77 && i < 108){

                if(check_valid_wfr($(this).uniqueId(), "", $(this).val())){
                    addValues(attempt, parseInt($(this).val()), i);
                } else {
                    alert("Please only enter 0, 3 or 5");
                    $(this).val("");
                }

            } else if(i > 128 && i < 159){

                if(check_valid_er($(this).uniqueId(), $(this).val())){
                    addValues(attempt, parseInt($(this).val()), i);
                } else {
                    alert("Please only enter 0, 3 or 5");
                    $(this).val("");
                }

            }
        });
});

Answer 1

我相信您正在寻找类似以下的内容：

 $('.addMe').change(function () { $('.addMe').removeClass('hasError'); var ttl = 0; $('.addMe').each(function (i, e) { ttl = Number($(e).val()) + ttl; var validVals = $(this).data('valid-vals').split(','); if (validVals.length > 0 && $(this).val() != '' && $.inArray($(this).val(), validVals) === -1) { $(this).addClass('hasError'); $(this).val(validVals.join(', ') + ' only'); } }); $('#cost').html($('.hasError').length > 0 ? '' : ttl); }); $('.addMe').focus(function () { if ($(this).val().match(/only/i)) { $(this).val(''); $(this).removeClass('hasError'); } }); 

 .addMe { margin-bottom: 15px; } .hasError { border-style: solid; border-width: 1px; border-color: red; background-color: #FFCCCC; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="cost"></div> <br> <br> <input type="text" value="" class="addMe" data-valid-vals="0,4,5" />Only - 0, 4, 5 <br> <input type="text" value="" class="addMe" data-valid-vals="0,5" />Only - 0, 5 <br> <input type="text" value="" class="addMe" data-valid-vals="0,5" />Only - 0, 5 <br> <input type="text" value="" class="addMe" data-valid-vals="0,3,5" />Only - 0, 3, 5 <br> <input type="text" value="" class="addMe" data-valid-vals="0,3,5" />Only - 0, 3, 5 <br>