Question

我有一个简单的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字段的值更改为默认值{ {1}}。但问题是，我只是在minimal-amount字段中添加了0（并且它的值变为5000）一切正常，但是当我将amount字段的值更改为1000时，脚本更改amount字段的值为默认值，就好像它们将amount缩小一样。我做错了什么，我该如何解决这个问题呢？附：您可以在此处找到此代码的示例 - http://friendfi.me/tests/amount.php

Answer 1

您应该在使用前解析该值。因为.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);       
        }
});

Answer 2

该代码中有很多陷阱。这是一个有效的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;

在the JSBin中查看此内容。

奇怪的jquery bug在简单的代码中

2 个答案:

亮点