JavaScript的else if语句无法工作

Question

我正在为学校制作一个网站，需要创建一个购物车。当我检查所需数量是否大于可用数量时，即使不是，它也会返回true。例如，3>12为true，我会收到错误消息。 我拼错了“available”.. 我知道 :( 这是我的函数：

function add_to_cart() {

   jQuery ('#modal_errors').html("");

   var size = jQuery('#size').val();
   var quantity = jQuery('#quantity').val();
   var avaliable = jQuery('#avaliable').val();
   var error = '';
   var data = jQuery('#add_product_form').serialize();

   if( size == '' || quantity == '' || quantity == 0 ){
      error +='<p class = "text-danger text-center">You need to select a size and quantity.</p>';
      jQuery('#modal_errors').html(error);
      return;
  }
  else if(quantity > avaliable){
      error +='<p class = "text-danger text-center">There are only '+avaliable+' avaliable and you asked for '+quantity+'.</p>';
      jQuery('#modal_errors').html(error);
      return;
  }
}

这里返回的信息（对于我的情况）是：“只有12个可用，而你要求3个。”

这可能是一个新手错误，但我无法弄清楚。请帮忙吗？

编辑 ->>

使用了

var quantity = Number.parseInt(jQuery('#quantity').val());
var avaliable = Number.parseInt(jQuery('#avaliable').val());

现在它正在运行，但我又迷失了 :D

我这样获取值

    <div class="form-group">
                <div class="col-xs-3"><label for="quantity">Quantity:</label>
                  <input type="number" class="form-control" id="quantity" name="quantity" min="0"></div><br><div class="col-xs-9">&nbsp;</div>
              </div>

由于输入类型为数字，我认为不需要将字符串转换为数字。 输入类型为数字，是否等同于可以进行比较或乘法运算的实际数字？

谢谢您的回答 :)

- Teo Alex

Answer 1

由于你的“quantity”和“avaliable”是字符串，而不是数字。因此比较会通过字符串进行。

请尝试：

var quantity = Number.parseInt(jQuery('#quantity').val());
var avaliable = Number.parseInt(jQuery('#avaliable').val());

编辑

或者，如果您想将它们用作字符串，可以仅在条件下进行解析。

else if(Number.parseInt(quantity) > Number.parseInt(avaliable)){

}

- Suren Srapyan

---

好奇：为什么要使用 Number.parseInt 而不是 parseInt？ - Chris

@Chris https://dev59.com/Qm855IYBdhLWcg3w5IrZ@Chris https://dev59.com/Qm855IYBdhLWcg3w5IrZ和number之间的区别是什么？ - Suren Srapyan

为什么不直接使用 Number()？ - Amresh Venugopal

@SurenSrapyan，我不是在指 Number()，而是在指 Number.parseInt()。根据 MDN 的说法，它们具有相同的功能，这就是为什么我要问的原因。 - Chris

Number.parseInt() 是一个新函数，我会注意一切全局的东西。 - Suren Srapyan

@AmreshVenugopal 我认为它们是相同的。对我来说，Number.parseInt() 比 Number() 更易读。 - Suren Srapyan

Answer 2

如其他地方所述，您需要将字符串转换为数字，但一旦这样做，您需要检查它们是否成功转换为数字，特别是因为您已经检查了字符串不为空。在这里，isNaN是一个有用的函数。您可以先检查字符串，然后检查数字，类似于以下内容：

function add_to_cart() {
    var error = "";

    var size = jQuery('#size').val();
    var quantity = jQuery('#quantity').val();
    var avaliable = jQuery('#avaliable').val();

    if (size === '' || quantity === '' || avaliable === '' ) {
        error += '<p class = "text-danger text-center">You need to select a size and quantity.</p>';
    } else {
        var sizeNum = Number.parseInt(size),
            quantityNum = Number.parseInt(quantity),
            avaliable = Number.parseInt( avaliable );

        if ( isNaN( quantityNum ) || quantityNum === 0 || isNaN( sizeNum ) || sizeNum === 0 ) {
            error += '<p class = "text-danger text-center">You need to select a size and quantity.</p>';
        }
        else if ( quantityNum > avaliableNum ) {
            error += '<p class = "text-danger text-center">There are only ' + avaliable + ' avaliable and you asked for ' + quantity + '.</p>';
        }
    }

    jQuery('#modal_errors').html(error);
}

- Matthew Wilcoxson