Jquery密鑰不能正常工作

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...");
        }
    });

這是一個小提琴

Answer 2

假設max 5 qty可用，如果用戶輸入6，我收到警報消息。 但如果用戶輸入10，那么我沒有得到警報。

您正在比較字符串而不是數字 。 您需要在比較之前將avlb_qty轉換為數字

var avlb_qty = +$("#avl_qty_"+productId).val(); //using unary + to coerce value to a number

var value = +$(this).val(); //converting $(this).val() to number as well

並將其比作

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

演示

 $('.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); var value = +$(this).val(); if (value > avlb_qty) { $(this).val(avlb_qty); alert("Not enough qty..."); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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>