如果输入字段数值等于0

Question

我正在尝试写入if input value =0隐藏div.class否则显示div.class

这就是我所尝试的，但似乎只有一部分是有效的。

$(document).ready(function() {
    if ($("input.product-quantity").val() == 0) {
        $(".name-number-field-container").hide();
    }
    else {
        $(".name-number-field-container").show();
    }
});

为了添加一个on change，我尝试了以下命令：

$(document).ready(function() {
    $('.product-quantity').change(function() {
    var $cont = $('.name-number-field-container');
      if($(this).val() === '0'){
           $cont.hide();
      } else {
           $cont.show();
      }
     });
});

但没那么走运

Answer 1

.val()将返回一个字符串，因此消除隐式转换：

$(function(){
    var $cont = $('.name-number-field-container'),
        $qty = $('.product-quantity');

    function setCont(val){
        if(val === '0'){
            $cont.hide();
        } else {
            $cont.show();
        }
    }

    $qty.on('keyup',function(){    
        setCont(this.value);
    });

    setCont($qty.val());
});

不需要parseInt，只需要比较字符串即可。如果你真的担心有人输入'00000‘之类的东西，那么是的，使用parseInt

    $(function(){
    var $cont = $('.name-number-field-container'),
        $qty = $('.product-quantity');

    function setCont(val){
        if(parseInt(val,10) === 0){
            $cont.hide();
        } else {
            $cont.show();
        }
    }

    $qty.on('keyup',function(){    
        setCont(this.value);
    });

    setCont($qty.val());
});

但在这一点上，您正在不必要地转换值，因此除非绝对必要，否则我建议您不要这样做。

编辑的：显然没有人通知你需要将它绑定到事件。我选择keyup可以立即看到变化，但是当input不再具有焦点时，您也可以很容易地使用blur。我也把它换成了this.value，因为它比克拉普顿快。

Here is a jsFiddle to show the string compare working和here is a jsFiddle to show the parseInt compare working。

再次编辑：请详细解释您面临的问题是什么，除了“它仍然不能工作。我已经更新了我的答案，以显示如何在页面加载和按键调用。

或者..。疯狂的想法。您只需在CSS中设置它：

.name-number-field-container {
    display:none;
}

那么你就不需要在Javascript中做所有的事情了。无论哪种方式都行得通。

Here is the jsFiddle for the string、here is the jsFiddle for the parseInt和here is the jsFiddle for the CSS。

Answer 2

$(document).ready(function() {
    if (parseInt($("input.product-quantity").val(), 10) === 0) {
        $(".name-number-field-container").hide();
    }
    else {
        $(".name-number-field-container").show();
    }
});

应该行得通。您的代码无法工作，因为val()返回字符串，和parseInt()返回字符串的整数部分。

如果你想通过字符串来检查，你可以这样做

$(document).ready(function() {
    if ($("input.product-quantity").val() === '0') {
        $(".name-number-field-container").hide();
    }
    else {
        $(".name-number-field-container").show();
    }
});

Answer 3

在进行逻辑比较时尽量不要使用==，最好使用===。这样就消除了对parseInt的需求。因为要比较输入字段的值，所以该字段的数据类型将为string。

$(document).ready(function() {
    var $input = $("input.product-quantity");
    var $field = $(".name-number-field-container");

    $field[($input.val() === "0" ? 'hide' : 'show')]();
});