Я пытаюсь написать, если входное value = 0 скрыть div.class else показать div.class
это то, что я пробовал, но только из этого, похоже, работает
$(document).ready(function() {
if ($("input.product-quantity").val() == 0) {
$(".name-number-field-container").hide();
}
else {
$(".name-number-field-container").show();
}
});
Чтобы добавить изменения, я пробовал:
$(document).ready(function() {
$('.product-quantity').change(function() {
var $cont = $('.name-number-field-container');
if($(this).val() === '0'){
$cont.hide();
} else {
$cont.show();
}
});
});
но не повезло
.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
чтобы сразу увидеть изменения, но вы можете так же легко blur
когда input
больше не имеет фокуса. Я также переключил его на это. this.value
, так как оно быстрее.
Вот jsFiddle, чтобы показать работу сравнения строк, и вот jsFiddle, чтобы показать, что parseInt сравнивает работу.
Отредактировано еще раз: пожалуйста, объясните в деталях, в чем проблема, с которой вы столкнулись, кроме "все еще не работает". Я обновил свои ответы, чтобы показать, как звонить BOTH на загрузку страницы и с помощью keyup.
Или... сумасшедшая мысль... вы просто установите ее в CSS:
.name-number-field-container {
display:none;
}
Тогда вам не нужно делать все это в Javascript. В любом случае это сработает.
Вот jsFiddle для строки, вот jsFiddle для parseInt, и вот jsFiddle для CSS.
Старайтесь не использовать ==
при выполнении логических сравнений, лучше использовать ===
. Вы устраняете необходимость в parseInt
таким образом. Поскольку вы сравниваете значение поля ввода, тип данных поля будет string
.
$(document).ready(function() {
var $input = $("input.product-quantity");
var $field = $(".name-number-field-container");
$field[($input.val() === "0" ? 'hide' : 'show')]();
});
$(document).ready(function() {
if (parseInt($("input.product-quantity").val(), 10) === 0) {
$(".name-number-field-container").hide();
}
else {
$(".name-number-field-container").show();
}
});
должно сработать. Ваш код не работает, потому что val()
возвращает String, а parseInt()
возвращает целую часть строки.
Если вы хотите проверить String, вы можете сделать
$(document).ready(function() {
if ($("input.product-quantity").val() === '0') {
$(".name-number-field-container").hide();
}
else {
$(".name-number-field-container").show();
}
});
===
вместо ==
. Вы можете найти, что это должно быть === "0"
после этого, и вам не нужен parseInt
parseInt
без второго параметра. Это может привести к очень странным результатам :).