简单代码中奇怪的jquery bug

Strange jquery bug in simple code

本文关键字：jquery bug 代码 简单      更新时间：2023-09-26

我有一个简单的html代码的形式:

<span class="price"></span>
Enter amount: 
<input type="text" class="form-control amount" name="amount" value="500">
<!--Next input fields are hidden by Bootstrap class "hide"-->
<input type="text" name="minimal-amount" class="hide minimal-amount" value="500">
<input type="text" name="oneprice" class="hide oneprice" value="0.20">
<script>
$(".amount").on("change", function(){
        var am = $(".amount").val();
        var min = $(".minimal-amount").val()
        if(am<min){
            $(".amount").val($(".minimal-amount").val());
        }else{
            var am = $(".amount").val();
            var oneP = $(".oneprice").val();
            var finalPrice = am*oneP;
            $(".price").html(finalPrice);       
        }
});
</script>

这个代码的思路很简单。当用户输入amount字段数字时，我的脚本应该检查，如果用户输入的数字小于minimal-amount字段的最小可用值，脚本将amount字段的值更改为默认的minimal-amount。但问题是，那个id我只是在amount字段中添加0(它的值变成5000)一切都好，但是当我将amount字段的值更改为1000时，脚本将amount字段的值更改为默认值，好像它缩小了minimul-amount。我做错了什么，我该如何解决这个问题?附注:您可以在这里找到此代码的示例- http://friendfi.me/tests/amount.php

您应该在使用前解析该值。因为.val()将只返回字符串类型。

$(".amount").on("change", function(){
        var am = parseFloat($(".amount").val());
        var min = parseFloat($(".minimal-amount").val());
        if(am<min){
            $(".amount").val($(".minimal-amount").val());
        }else{
            var am = $(".amount").val();
            var oneP = $(".oneprice").val();
            var finalPrice = am*oneP;
            $(".price").html(finalPrice);       
        }
});

这段代码中有很多陷阱。这是一个工作的JSBin: http://jsbin.com/qilob/2/edit?html,js,output

突出了

在使用DOM之前需要初始化它。将其封装在传递给jQuery的函数中会使其等待在操作页面之前完成加载。

$(function() { ... });

使用缓存值，因为元素不会改变太多。这节省了多次解析选择器的需要。它也节省了关于打字和可读性。

var $amount         = $("#amount");
var $minimalAmount  = $("#minimal-amount");
var $onePrice       = $("#oneprice");
var $finalPrice     = $("#price");

将字符串解析为Int类型时，需要使用parseInt 

var amount = parseInt($amount.val(), 10);

相反，当将字符串解析为Float时，您需要使用parseFloat 

var price = parseFloat($onePrice.val());

JavaScript不能很好地处理基于浮点数的算术。舍入误差很糟糕，尤其是在处理我们需要的钱的时候移动小数点，以防止舍入错误在更显著部分价格价值

var total = (amount * (price * 100)) / 100;

查看它在JSBin中的作用

相关文章：