根据输入的数量计算单价

Calculating unit price based on quantity entered

本文关键字：计算 单价 输入      更新时间：2023-09-26

我正试图创建一个脚本，根据在相邻框中输入的员工人数在一个框中显示价格。该脚本适用于静态金额，即基本价格为每位员工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);
    });
})

将所有内容放入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);
});

除了将代码放入事件处理程序中之外，您不需要一遍又一遍地声明同一个变量。此外，不需要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);
});

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

相关文章：