jQuery 计算器的独特“折扣”挑战

Question

我一直在纠结这个...我有三个表单字段：个人、夫妻、总计。这是一个会议注册费用计算器。

一个人 (#individuals) 的费用为 50 美元。一对夫妇 (#couples) 售价 75 美元。报名人数超过3人可享受优惠。每个人的折扣价为 40 美元。所以我们计算总人数，如果有 3 人或更多人，则对每个人应用 40 美元的新价格。在计算#individuals 和#couples 字段之间的总人数之前，#couples 的值需要乘以2，因为每对夫妇有两个人。新的“打折”#individuals 价格为 40 美元，新的 #couple 价格为 80 美元。

我的问题只是“我哪里出错了？”。非常感谢任何见解。

我当前的代码在#total 字段中产生了不正确的数字：

   $('#individuals').change(compute);
   $('#couples').change(compute);
   function compute() {
      var ind = $('#individuals').val(); // number of individuals
      var coup = $('#couples').val()*2; // number of people in a couple (2)
      var people = ind + coup; // add up the total people
      if (people >= 3) {    
        var a = $('#individuals').val()*40; // discount price of an individual
        var b = $('#couples').val()*80; // discount price of couple
      }
      else {
        var a = $('#individuals').val()*50; // normal price of an individual
        var b = $('#couples').val()*75; // normal price of couple
      }
      var total = a + b;
      $('#total').val(total);
   }

Answer 1

1. 不要重复自己 - 每个字段只调用一次 $('#element').val()

2. 使用parseInt(val, 10) 确保您的数字是数字而不是字符串。您的ind 字段当前是一个字符串，当您将其“连接”到coup 时会导致错误：

例如：

function compute() {
  var ind = parseInt($('#individuals').val(), 10); // number of individuals
  var coup = parseInt($('#couples').val(), 10);    // number of couples
  var people = ind + 2 * coup;                     // add up the total people
  var total;
  if (people >= 3) { 
    total = 40 * people;
  } else {
    total = 50 * ind + 75 * coup;
  }
  $('#total').val(total);
}

$('#individuals,#couples').on('change', compute);