javascript - 我如何使用 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>