根据输入的数量计算单价

时间:2014-11-05 14:09:51

标签: javascript jquery

我正在尝试创建一个脚本,根据在相邻框中输入的员工数量在一个框中显示价格。 该脚本适用于静态金额,即基本价格为每位员工8英镑。如果输入5,则显示的价格是正确的,40英镑。

我遇到的问题是在达到某个阈值时更改单价。 1-5名员工的单价是8,6-21是7和22-50是6。 无论在员工框中输入什么,数字总是乘以8。

我对javascript非常缺乏经验,所以任何帮助都会非常受欢迎!

这是我的代码:

<div class="employee-button">
    <form name="calculator" id="calculator">
    <input name="employees" id="employees" type="text" placeholder="# of Employees" />
    </form>
</div>  
<div class="cost-button">
    <span id="result">Monthly Cost</span>
</div>

的Javascript

$(function() {

    var ccNum;
    $('#employees').keyup(function(){
        ccNum = $(this).val();
    });

    if((ccNum >= 0) && (ccNum <= 5)){
         var unitPrice = 8
    }
    else if((ccNum >= 6) && (ccNum <= 21)){
         var unitPrice = 7
    }
    else if((ccNum >= 21) && (ccNum <= 50)){
         var unitPrice = 6
    }
    else var unitPrice = 8;

    $('#employees').keyup(function(){
        $('#result').text(ccNum * unitPrice);
    });

})

2 个答案:

答案 0 :(得分:1)

将所有内容放在keyup函数中。您的代码不起作用,因为计算价格的逻辑只执行一次,而不是每个keyup事件。

$('#employees').keyup(function(){
  var ccNum = $(this).val();

  if((ccNum >= 0) && (ccNum <= 5)){
                var unitPrice = 8
            }
  else if((ccNum >= 6) && (ccNum <= 21)){
                var unitPrice = 7
             }
  else if((ccNum >= 21) && (ccNum <= 50)){
                var unitPrice = 6
             }
  else var unitPrice = 8;

  $('#result').text(ccNum * unitPrice);
});

答案 1 :(得分:0)

除了将代码放在事件处理程序中之外,您不需要一遍又一遍地声明同一个变量。此外,不需要测试0到5(已经由默认值覆盖):

$('#employees').keyup(function(){
  var ccNum = ~~$(this).val();

  // Start with the default
  var unitPrice = 8;

  if((ccNum >= 6) && (ccNum <= 21)){
      unitPrice = 7;
  }
  else if((ccNum >= 21) && (ccNum <= 50)){
      unitPrice = 6;
  }
  $('#result').text(ccNum * unitPrice);
});

注意:~~是转换为整数值的快捷方式。