更高效的jquery账单估计器
更高效的jquery账单估计器
提问于 2018-06-06 05:28:43
我正在用计算器根据账单成本来计算额外的费用。基本的想法是，如果账单少于200美元，就会有不同增量的固定费用。如果账单超过200美元，那么每增加50美元，费用就会增加1.12美元。我最终手动写出了最高可达400美元的所有可能性，但我不确定账单能涨到多高，无论如何，我觉得必须有更好的方法来做到这一点，特别是在每条IF语句中更新值的部分。
<fieldset><label>Costs</label><input type="text" id="systemSize"/></fieldset>
<fieldset><label>Average bill amount <input type="text" id="billAmount"/></fieldset>
<p class="submit" id="submit">SUBMIT</p>
if(billAmount){
if(billAmount<50){
alert ("Bill amount is too low");
}
if(billAmount>=50 && billAmount <75){
systemSizeNew = ("2.8");
$("#systemSize").val(systemSizeNew);
}
if(billAmount>=75 && billAmount <100){
systemSizeNew = ("3.36");
$("#systemSize").val(systemSizeNew);
}
if(billAmount>=100 && billAmount <150){
systemSizeNew = ("4.3");
$("#systemSize").val(systemSizeNew);
}
if(billAmount>=150 && billAmount <200){
systemSizeNew = ("5.32");
$("#systemSize").val(systemSizeNew);
}
if(billAmount>=200 && billAmount <250){
systemSizeNew = ("6.44");
$("#systemSize").val(systemSizeNew);
}
if(billAmount>=250 && billAmount <300){
systemSizeNew = ("7.56");
$("#systemSize").val(systemSizeNew);
}
if(billAmount>=300 && billAmount <350){
systemSizeNew = ("8.68");
$("#systemSize").val(systemSizeNew);
}
if(billAmount>=350 && billAmount <400){
systemSizeNew = ("9.80");
$("#systemSize").val(systemSizeNew);
}
}回答 3
Stack Overflow用户
发布于 2018-06-06 05:48:22
首先，让我们将所有逻辑转移到一个单独的函数中：
const chargePer50Increment = 1.12;
const chargeUpTo = {
75: 2.8,
100: 3.36,
150: 4.3,
200: 5.32
};
function chargeForBill(amount) {
if (amount < 50) {
// or however else you want to handle it
alert ("Bill amount is too low");
return false;
}
for (var upTo in chargeUpTo) {
if (amount < upTo) {
return chargeUpTo[upTo];
}
}
// at this point amount is >= 200 and upTo = 200
const numOf50Increments = 1 + Math.floor((amount - upTo) / 50));
return chargeUpTo[upTo] + numOf50Increments * chargePer50Increment;
}现在你需要做的就是：
$("#systemSize").val(chargeForBill(billAmount));Stack Overflow用户
发布于 2018-06-06 05:47:15
@dubstylee在评论中提到的版本。
document.querySelector('#amount').addEventListener('input', function(event){
var value = event.target.value;
if (value < 50) {
console.log(0);
} else if (value < 75) {
console.log(2.8);
} else if (value < 100) {
console.log(3.36);
} else if (value < 150) {
console.log(4.3);
} else {
/*
take the value and subtract 200
get the max between this value and 0, so the value will not be negative
get the floor of this so values such as 0.98
becomes 0 and 3.78 becomes 3
multiply this by 1.12 before adding it to the base 5.32
*/
console.log(
5.32 + (
Math.floor(Math.max(0, value - 200) / 50) * 1.12
)
);
}
});<input type="number" id="amount" value="49" min="0">
Stack Overflow用户
发布于 2018-06-06 05:56:51
在这种情况下，我会指定一个字典，它将阈值反映为键(注意，这里键的定义顺序很重要-像数组，字典保持键的顺序)，并定义一个回调函数，因为根据账单金额有不同的操作(否则它可能只是#systemSize的值映射)。
function setSystemSize(systemSize) {
return () => $("#systemSize").val(systemSize);
}
let callbacks = {
50: () => alert("Bill amount is too low"),
75: setSystemSize('2.80'),
100: setSystemSize('3.36'),
150: setSystemSize('4.30'),
200: setSystemSize('5.32'),
250: setSystemSize('6.44'),
300: setSystemSize('7.56'),
350: setSystemSize('8.68'),
Infinity: setSystemSize('9.80'),
}
$('button.submit').on('click', function() {
let value = parseInt($('#billAmount').val(), 10);
if(isNaN(value)) return alert('enter bill amount');
callbacks[Object.keys(callbacks).find(k => value < Number(k))]();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<fieldset>
<label>Costs <input type="text" id="systemSize" readonly></label>
<br>
<label>Average bill amount <input type="text" id="billAmount"></label>
<br>
<button class="submit">Submit</button>
</fieldset>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50709205
复制相关文章
相似问题