jquery 求和和添加类

Question

把我的头发拉出来......简而言之 - 我有 2 个字段和一个 div 显示这些字段的总和。如果这个人调整了金额并且金额不等于原始金额那么我将 class 更改为 "sumbad"。如果此人更改金额使其等于原始金额，那么我想将 class 更改为 "sumgood"。除了恢复到 "sumgood"，我一切正常。感谢您的帮助！

$(document).ready(function(){
   $(".txt1").each(function(){
    $(this).keyup(function(){calculateSum1();
    });
   });
  });
  function calculateSum1()
  {var sum=0;$(".txt1").each(function(){
   
   if (!isNaN(this.value) && this.value.length != 0) {
              sum += parseFloat(this.value);
            $(this).css("background-color", "#FEFFB0");
   }
   else if (this.value.length != 0){
    $(this).css("background-color", "red");
   }
  });
  
  $("#sum1").html(sum);  
  var finalinventory1 = '48'; 
  
   if ($("#sum1").html(sum)!= 48) {
    $("#sum1").addClass('sumbad').removeClass('sumgood');
   }
   
   else if ($("#sum1").html(sum) === 48) {
    $("#sum1").addClass('sumgood').removeClass('sumbad');
    alert("Your book is overdue.");
   }
  }

.sumgood{
 font-size:14px;
 font-weight:bold;
 color:#060
}
.sumbad{
 font-size:14px;
 font-weight:bold;
 color:#900
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Available Retail:
<input type="text" name="available1"  class="txt1" value="29" size="5" ><br>
Available Wholesale:
<input type="text" name="availablewholesale1"  class="txt1" value="19" size="5" ><br>
Original Inventory: 48<br>
Adjusted Inventory:
<span class="sumgood" id="sum1">48</span>

这是 jfiddle： http://jsfiddle.net/m8cdx5mk/3/

Answer 1

使用 text() 而不是 html() 这是正确的代码

$(document).ready(function() {
    $(".txt1").each(function() {
        $(this).keyup(function() {
            calculateSum1();
        });
    });
});

function calculateSum1() {
    var sum = 0;
    $(".txt1").each(function() {

        if (!isNaN(this.value) && this.value.length != 0) {
            sum += parseFloat(this.value);
            $(this).css("background-color", "#FEFFB0");
        } else if (this.value.length != 0) {
            $(this).css("background-color", "red");
        }
    });

    $("#sum1").html(sum);
    var finalinventory1 = '48';

    if ($("#sum1").text() != '48') {
        $("#sum1").addClass('sumbad').removeClass('sumgood');
    } else if ($("#sum1").text() === '48') {
        $("#sum1").addClass('sumgood').removeClass('sumbad');
        alert("Your book is overdue.");
    }
}

Answer 2

可以进行很多性能和组织改进，因此我重写了其中的一些内容以更好地利用内存和优化。

$(function () {
    var $fields = $('.txt1');
    var $sum1 = $('#sum1');

    $fields.keyup(function calculateSum1 () {
        var sum = 0;
        $fields.each(function () {
            var $field = $(this);

            var value = this.value;
            if (value.length) {
                value = parseFloat(value);
                if (!isNaN(value)) {
                    sum += value;
                    $field.css('background-color', '#FEFFB0');
                } else {
                    $field.css('background-color', 'red');
                }
            }
        });

        $sum1.html(sum);

        var finalinventory1 = 48;

        $sum1.removeClass('sumgood sumbad');
        if (sum != finalinventory1) {
            $sum1.addClass('sumgood');
            alert('Your book is overdue.');
        } else {
            $sum1.addClass('sumbad');
        }
    });
});

jquery 求和和添加类

jquery sum and addclass

jquery

addclass

removeclass