我正在尝试创建一个脚本,根据在相邻框中输入的员工数量在一个框中显示价格。 该脚本适用于静态金额,即基本价格为每位员工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);
});
})
答案 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);
});
注意:~~
是转换为整数值的快捷方式。