麻烦与简单的jQuery计算器在页面上

Trouble with simple jQuery calculator on page

本文关键字：计算器 jQuery 简单 麻烦      更新时间：2023-09-26

我试图在jQuery上做简单的计算，这将根据输入字段中的输入和检查值计算总价。这是我简化的代码，但它不工作。我错在哪里了。谢谢。这是JSFiddle。

$(document).ready(function(){
    var total = 0;
    var totalextras = 0;
    var rmnumber = 0;
    var bmnumber = 0;
    $('.extras').click(function(){        
        $('.extras:checked').each(function(){
            totalextras += parseInt($(this).val());            
        });
    });
    $('#rm').on('change',function(){
        rmnumber = parseInt($(this).val());
    });
    $('#rm').on('change',function(){
        bmnumber = parseInt($(this).val());
    });
    total = totalextras + rmnumber + bmnumber;
    $('#total').text(total);
});
<input type='number' id='rm'>
<input type='number' id='bm'><br>
<div class='extra'>
    <label>first</label>
    <input class='extras' type='checkbox' value='100'>
    <label>second</label>
    <input class='extras' type='checkbox'value='500'>
    <label>therd</label>
    <input class='extras' type='checkbox'value='1000'>
    <label>forth</label>
    <input class='extras' type='checkbox'value='1200'>
</div>
<p id='total'>0</p>

我注意到你代码中的一些逻辑错误(并为你修复了它们):

  • 您的$('.extras:checked')选择器上缺少.。(编辑:仅在您提供的小提琴上，该帖子已被更正)

  • 您为$('#rm')设置了两次onChange事件处理程序，我认为您的意思是第二个$('#bm')。

现在，除了这些错误，下面是你的代码不能工作的原因:
  • 你的代码$('#total').text(total);只运行一次，那是当页面加载。因为你把它直接放在$(document).ready()里面。相反，你需要把它放在on('change') .

下面是更正后的代码:

$(document).ready(function(){
    var total;
    var totalextras=0;
    var rmnumber, bmnumber;
    $('.extras').click(function(){
        $('.extras:checked').each(function(){
            // Change to "+=" if you want the number to keep increasing
            totalextras = parseInt($(this).val());
        });
        // Bonus: If you want to re-calculate when checkbox clicked
        total = totalextras + (rmnumber + bmnumber);
        $('#total').text(total);
    });
    $('#rm').on('change',function(){
        rmnumber = parseInt($(this).val());
        total = totalextras + (rmnumber + bmnumber);
        $('#total').text(total);
    });
    $('#bm').on('change',function(){
        bmnumber = parseInt($(this).val());
        total = totalextras + rmnumber + bmnumber;
        $('#total').text(total);
    });
});

小提琴:http://jsfiddle.net/unf21wak/6/

每次输入更改时都需要更新总数。您的代码也可以缩减到只有几行。

$(document).ready(function () {
  var total = 0;
  $('input').on('change', function () {
    total = 0; // Reset the total every time an input changes
    // Check the value of each checkbox
    $('input[type="checkbox"]:checked').each(function () {
      total += parseInt($(this).val());
    });
    // Check the value of each number field
    $('input[type="number"]').each(function () {
      total += $(this).val() ? parseInt($(this).val()) : 0;
    });
    $('#total').text(total);
  });
});
http://jsfiddle.net/huwmju01/4/

Edit:更新以反映Duncan Tidd的建议，即重置数字字段值以避免NaN输出。还通过迭代每个数字字段类型来缩短整个过程，就像我们对复选框所做的那样。

相关文章：