當添加不同的值時，如何使用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>