javascript - jquery 中使用 math.round() 添加和删除值的问题
问题描述
我正在研究custom plan我网站中的功能。随着活动任务值的增加或减少，可以添加或删除任务。
活动任务中有四个值：1 2 3 4
1 将总值乘以 1
2 将总值乘以 1.5
3 将总值乘以 1.4
4 将总值乘以 1.3
这个值可以增加和减少..
当活动任务的值为 1 并且我添加了它正常工作的计划（因为删除所有计划，总值变为 0）对于其他活动任务相同。
问题陈述：
但是当 active 为 1 并且我添加前两个计划然后将活动任务增加 2 然后添加第三个计划它可以正常工作...但是通过在最后删除所有这 3 个计划它给了我-1 值...我认为它是因为该值无法正确舍入..
我还尝试了 math.ceil() 和 math.floor() 功能，但没有成功。
任何帮助，将不胜感激。先感谢您。
这是我的代码：
var $j = jQuery.noConflict();
(function($j) {
var otherincome = $j(".totalamountremaining");
$j('.addno').on('click',function(){
var $jqty=$j(this).closest('span').find('.qty');
var currentVal = parseInt($jqty.val());
if (!isNaN(currentVal) && currentVal < 4) {
$jqty.val(currentVal + 1);
if (!isNaN(currentVal) && currentVal == 1){
var firstinc = Math.round(parseInt(otherincome.val()||0)*1.5);
$j('.totalamountremaining').val(firstinc);
$j('.totalamountremaining1').text(firstinc);
}
if (!isNaN(currentVal) && currentVal == 2){
var secondinc = Math.round(parseInt(otherincome.val()||0)*1.4);
$j('.totalamountremaining').val(secondinc);
$j('.totalamountremaining1').text(secondinc);
}
if (!isNaN(currentVal) && currentVal == 3){
var thirdinc = Math.round(parseInt(otherincome.val()||0)*1.3);
$j('.totalamountremaining').val(thirdinc);
$j('.totalamountremaining1').text(thirdinc);
}
}
});
$j('.minus').on('click',function(){
var $jqty=$j(this).closest('span').find('.qty');
var currentVal = parseInt($jqty.val());
if (!isNaN(currentVal) && currentVal > 1) {
$jqty.val(currentVal - 1);
if (!isNaN(currentVal) && currentVal == 2){
$j('.totalamountremaining').val(function(i, val) { return Math.round(val/1.5) });
$j('.totalamountremaining1').text(function(i, val) { return Math.round(val/1.5) });
}
if (!isNaN(currentVal) && currentVal == 3){
$j('.totalamountremaining').val(function(i, val) { return Math.round(val/1.4) });
$j('.totalamountremaining1').text(function(i, val) { return Math.round(val/1.4) });
}
if (!isNaN(currentVal) && currentVal == 4){
$j('.totalamountremaining').val(function(i, val) { return Math.round(val/1.3) });
$j('.totalamountremaining1').text(function(i, val) { return Math.round(val/1.3) });
}
}
});
var primaryincome = $j("#addnumber");
$j(".calculate").click(function () {
var $jqty=$j('.addno').closest('span').find('.qty');
var currentVal = parseInt($jqty.val());
if (!isNaN(currentVal) && currentVal == 1){
var totalincome = Math.round(parseInt(primaryincome.val()||0) + parseInt(otherincome.val()||0));
$j('.totalamountremaining').val(totalincome);
$j('.totalamountremaining1').text(totalincome);
}
if (!isNaN(currentVal) && currentVal == 2){
var totalincome = Math.round((Math.ceil(parseInt(primaryincome.val()||0) * 1.5)) + parseInt(otherincome.val()||0));
$j('.totalamountremaining').val(totalincome);
$j('.totalamountremaining1').text(totalincome);
}
if (!isNaN(currentVal) && currentVal == 3){
var totalincome = Math.round((Math.ceil(parseInt(primaryincome.val()||0) * 1.5) * 1.4) + parseInt(otherincome.val()||0));
$j('.totalamountremaining').val(totalincome);
$j('.totalamountremaining1').text(totalincome);
}
if (!isNaN(currentVal) && currentVal == 4){
var totalincome = Math.round((Math.round(Math.ceil(parseInt(primaryincome.val()||0) * 1.5) * 1.4)*1.3) + parseInt(otherincome.val()||0));
$j('.totalamountremaining').val(totalincome);
$j('.totalamountremaining1').text(totalincome);
}
$j('.plan.shopifytask .add').hide();
$j('.plan.shopifytask .remove').show();
$j('.plan.shopifytask').removeClass('yetadd');
})
$j(".shopifytask-remove").click(function () {
var $jqty=$j('.minus').closest('span').find('.qty');
var currentVal = parseInt($jqty.val());
if (!isNaN(currentVal) && currentVal == 1){
var totalincome = Math.round(parseInt(otherincome.val()||0) - parseInt(primaryincome.val()||0));
$j('.totalamountremaining').val(totalincome);
$j('.totalamountremaining1').text(totalincome);
}
if (!isNaN(currentVal) && currentVal == 2){
var totalincome = Math.round((parseInt(otherincome.val()||0) - Math.ceil(parseInt(primaryincome.val()||0) * 1.5)));
$j('.totalamountremaining').val(totalincome);
$j('.totalamountremaining1').text(totalincome);
}
if (!isNaN(currentVal) && currentVal == 3){
var totalincome = Math.round((parseInt(otherincome.val()||0) - Math.round(Math.ceil(parseInt(primaryincome.val()||0) * 1.5)*1.4)));
$j('.totalamountremaining').val(totalincome);
$j('.totalamountremaining1').text(totalincome);
}
if (!isNaN(currentVal) && currentVal == 4){
var totalincome = Math.round(parseInt(otherincome.val()||0) - Math.round(Math.round(Math.ceil(parseInt(primaryincome.val()||0) * 1.5)*1.4)*1.3));
$j('.totalamountremaining').val(totalincome);
$j('.totalamountremaining1').text(totalincome);
}
$j('.plan.shopifytask .add').show();
$j('.plan.shopifytask .remove').hide();
$j('.plan.shopifytask').addClass('yetadd');
})
var primaryincome4 = $j("#addnumber4");
$j(".calculate4").click(function () {
var $jqty=$j('.addno').closest('span').find('.qty');
var currentVal = parseInt($jqty.val());
if (!isNaN(currentVal) && currentVal == 1){
var totalincome = Math.round(parseInt(primaryincome4.val()||0) + parseInt(otherincome.val()||0));
$j('.totalamountremaining').val(totalincome);
$j('.totalamountremaining1').text(totalincome);
}
if (!isNaN(currentVal) && currentVal == 2){
var totalincome = Math.round((Math.ceil(parseInt(primaryincome4.val()||0) * 1.5)) + parseInt(otherincome.val()||0));
$j('.totalamountremaining').val(totalincome);
$j('.totalamountremaining1').text(totalincome);
}
if (!isNaN(currentVal) && currentVal == 3){
var totalincome = Math.round((Math.ceil(parseInt(primaryincome4.val()||0) * 1.5) * 1.4) + parseInt(otherincome.val()||0));
$j('.totalamountremaining').val(totalincome);
$j('.totalamountremaining1').text(totalincome);
}
if (!isNaN(currentVal) && currentVal == 4){
var totalincome = Math.round((Math.round(Math.ceil(parseInt(primaryincome4.val()||0) * 1.5) * 1.4)*1.3) + parseInt(otherincome.val()||0));
$j('.totalamountremaining').val(totalincome);
$j('.totalamountremaining1').text(totalincome);
}
$j('.plan.designtask .add').hide();
$j('.plan.designtask .remove').show();
$j('.plan.designtask').removeClass('yetadd');
})
$j(".designtask-remove").click(function () {
var $jqty=$j('.minus').closest('span').find('.qty');
var currentVal = parseInt($jqty.val());
if (!isNaN(currentVal) && currentVal == 1){
var totalincome = Math.round(parseInt(otherincome.val()||0) - parseInt(primaryincome4.val()||0));
$j('.totalamountremaining').val(totalincome);
$j('.totalamountremaining1').text(totalincome);
}
if (!isNaN(currentVal) && currentVal == 2){
var totalincome = Math.round((parseInt(otherincome.val()||0) - Math.ceil(parseInt(primaryincome4.val()||0) * 1.5)));
$j('.totalamountremaining').val(totalincome);
$j('.totalamountremaining1').text(totalincome);
}
if (!isNaN(currentVal) && currentVal == 3){
var totalincome = Math.round((parseInt(otherincome.val()||0) - Math.round(Math.ceil(parseInt(primaryincome4.val()||0) * 1.5)*1.4)));
$j('.totalamountremaining').val(totalincome);
$j('.totalamountremaining1').text(totalincome);
}
if (!isNaN(currentVal) && currentVal == 4){
var totalincome = Math.round(parseInt(otherincome.val()||0) - Math.round(Math.round(Math.ceil(parseInt(primaryincome4.val()||0) * 1.5)*1.4)*1.3));
$j('.totalamountremaining').val(totalincome);
$j('.totalamountremaining1').text(totalincome);
}
$j('.plan.designtask .add').show();
$j('.plan.designtask .remove').hide();
$j('.plan.designtask').addClass('yetadd');
})
var primaryincome5 = $j("#addnumber5");
$j(".calculate5").click(function () {
var $jqty=$j('.addno').closest('span').find('.qty');
var currentVal = parseInt($jqty.val());
if (!isNaN(currentVal) && currentVal == 1){
var totalincome = Math.round(parseInt(primaryincome5.val()||0) + parseInt(otherincome.val()||0));
$j('.totalamountremaining').val(totalincome);
$j('.totalamountremaining1').text(totalincome);
}
if (!isNaN(currentVal) && currentVal == 2){
var totalincome = Math.round((Math.ceil(parseInt(primaryincome5.val()||0) * 1.5)) + parseInt(otherincome.val()||0));
$j('.totalamountremaining').val(totalincome);
$j('.totalamountremaining1').text(totalincome);
}
if (!isNaN(currentVal) && currentVal == 3){
var totalincome = Math.round((Math.ceil(parseInt(primaryincome5.val()||0) * 1.5) * 1.4) + parseInt(otherincome.val()||0));
$j('.totalamountremaining').val(totalincome);
$j('.totalamountremaining1').text(totalincome);
}
if (!isNaN(currentVal) && currentVal == 4){
var totalincome = Math.round((Math.round(Math.ceil(parseInt(primaryincome5.val()||0) * 1.5) * 1.4)*1.3) + parseInt(otherincome.val()||0));
$j('.totalamountremaining').val(totalincome);
$j('.totalamountremaining1').text(totalincome);
}
$j('.plan.wptask .add').hide();
$j('.plan.wptask .remove').show();
$j('.plan.wptask').removeClass('yetadd');
})
$j(".wptask-remove").click(function () {
var $jqty=$j('.minus').closest('span').find('.qty');
var currentVal = parseInt($jqty.val());
if (!isNaN(currentVal) && currentVal == 1){
var totalincome = Math.round(parseInt(otherincome.val()||0) - parseInt(primaryincome5.val()||0));
$j('.totalamountremaining').val(totalincome);
$j('.totalamountremaining1').text(totalincome);
}
if (!isNaN(currentVal) && currentVal == 2){
var totalincome = Math.round((parseInt(otherincome.val()||0) - Math.ceil(parseInt(primaryincome5.val()||0) * 1.5)));
$j('.totalamountremaining').val(totalincome);
$j('.totalamountremaining1').text(totalincome);
}
if (!isNaN(currentVal) && currentVal == 3){
var totalincome = Math.round((parseInt(otherincome.val()||0) - Math.round(Math.ceil(parseInt(primaryincome5.val()||0) * 1.5)*1.4)));
$j('.totalamountremaining').val(totalincome);
$j('.totalamountremaining1').text(totalincome);
}
if (!isNaN(currentVal) && currentVal == 4){
var totalincome = Math.round(parseInt(otherincome.val()||0) - Math.round(Math.round(Math.ceil(parseInt(primaryincome5.val()||0) * 1.5)*1.4)*1.3));
$j('.totalamountremaining').val(totalincome);
$j('.totalamountremaining1').text(totalincome);
}
$j('.plan.wptask .add').show();
$j('.plan.wptask .remove').hide();
$j('.plan.wptask').addClass('yetadd');
})
})(jQuery);.plan.yetadd .remove {
display: none;
}
.plan-total{
margin-top:50px;
}
.plan-total-price{
margin-left:20px
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="plan">
<span class="plan-text">Active Tasks
<span class="plan-qty addminus">
<i class="fa fa-minus-square-o minus target1" id="minus2" aria-hidden="true"></i>
<input id="qty2" value="1" class="qty" disabled="" type="text">
<i class="fa fa-plus-square-o addno target" id="add2" aria-hidden="true"></i>
</span>
</div>
<div class="plan yetadd designtask">
<span class="plan-text">Task1
<span class="plan-qty qtywidth">
<button class="remove designtask-remove"><i class="fa fa-minus-square-o" aria-hidden="true"></i>Remove</button>
<button class="add calculate4">
<i class="fa fa-plus-square-o" aria-hidden="true"></i>
<span>Add</span>
</button>
<span class="dolorsign">$</span>
<input value="149" id="addnumber4" class="primaryincome" disabled="" type="text">
<span class="super">/month</span>
</span>
</div>
<div class="plan yetadd wptask">
<span class="plan-text">Task2
<span class="plan-qty qtywidth">
<button class="remove wptask-remove"><i class="fa fa-minus-square-o" aria-hidden="true"></i>Remove</button>
<button class="add calculate5">
<i class="fa fa-plus-square-o" aria-hidden="true"></i>
<span>Add</span>
</button>
<span class="dolorsign">$</span>
<input value="39" id="addnumber5" class="primaryincome priceleft" disabled="" type="text">
<span class="super">/month</span>
</span>
</div>
<div class="plan yetadd shopifytask">
<span class="plan-text">Task3
</span>
<span class="plan-qty qtywidth">
<button class="remove shopifytask-remove"><i class="fa fa-minus-square-o" aria-hidden="true"></i>Remove</button>
<button class="add calculate">
<i class="fa fa-plus-square-o" aria-hidden="true"></i>
<span>Add</span>
</button>
<span class="dolorsign">$</span>
<input value="79" id="addnumber" class="primaryincome priceleft" disabled="" type="text">
<span class="super">/month</span>
</span>
</div>
<div class="plan-total">
<span class="plan-total-text">PLAN TOTAL:</span>
<span class="plan-total-price">
<span class="totaldolar">$</span>
<input class="totalamountremaining primaryincome priceleft2 price-bold-total" value="0" disabled="" id="txt" type="hidden">
<span class="totalamountremaining1 primaryincome priceleft2 price-bold-total">0</span>
<span class="super-total">/month</span>
</span>
</div>解决方案
只是一个快速提示。从 DOM 中分离数据。
每当您单击减号或加号按钮时，都会从 0 重新计算金额。例如，如果您有两个活动任务并添加了 Task1 和 Task2，您将获得 283$。
如果您删除一个活动任务，请不要从 283$ 开始，只需从 0 重新计算即可。当您从先前的值继续计算时，会累积浮点误差。
推荐阅读
- pointers - 在方括号中添加两个寄存器是什么意思？
- javascript - Angular，动态获取组件引用，单击按钮
- python-3.x - 使用 Python 和 Google2Pandas 获取 Google Analytics API
- swift - 在 Swift 5 中正确执行 shell 命令
- azure - 在与主机相同的 Vnet 上运行 Jenkins Azure ACI Docker 代理
- tensorflow - 神经网络输出问题
- mysql - 在mysql中的两个数字之间创建虚拟行
- javascript - 即使字段为空白，添加任务验证仍会添加一个空任务
- c# - 使用 .Net System.Numeric 的新向量仅填充向量长度的一半
- javascript - 使用 React Context API 保持状态