javascript - Jquery keyup 无法正常工作

Question

我正在尝试使用两个文本框检查可用数量。如果输入的数量大于可用数量，则输入的数量应自动更改为最大可用数量。

假设最多 5 个可用，如果用户输入 6 个，我会收到一条警告消息。但是如果用户输入 10 那么我就不会收到警报。我正在使用以下代码。

<div class="qty-wrapper">
    <label for="qty">Qty</label>
    <input data-productid="100" type="text" id="qty" maxlength="12" value="1" class="input-text qty hk_qty_text_box" />
    <br><br>
    <label for="qty">Available</label>
    <input readonly style="width: 100px;" type="text" id="avl_qty_100" value="5" class="input-text qty">
</div>


<script>
$('.hk_qty_text_box').on('keyup', function() {

    var productId = $(this).data("productid");
    var avlb_qty = $("#avl_qty_"+productId).val();

    console.log($(this).val() +"===>"+ avlb_qty);

    if($(this).val() > avlb_qty){
        $(this).val(avlb_qty);
        alert("Not enough qty...");
    }
});
</script>

此外，ID avl_qty_100 值正在使用 ajax 根据所选产品进行更改。

Answer 1

您需要使用 parseInt 将字符串转换为整数。

JS

$('.hk_qty_text_box').on('keyup', function() {

        var productId = $(this).data("productid");
        var avlb_qty = parseInt($("#avl_qty_"+productId).val());


        if(parseInt($(this).val()) > avlb_qty){
            $(this).val(avlb_qty);
            alert("Not enough qty...");
        }
    });

这是一个fiddle