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

Answer 2

假设最多5个数量可用，如果用户输入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...");
}

<强>演示

＆＃13;

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

＆＃13;

<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>

＆＃13;

Jquery密钥不能正常工作

2 个答案: