У меня есть следующий html:
<button id="hideToggle">show/hide</button>
<form id="item">
<div>Item 1 <input name="item1" type="number"/></div>
<div>Item 2 <input name="item2" type="number"/></div>
<div>Item 3 <input name="item3" type="number"/></div>
</form>
Как я могу скрыть каждый <div>
внутри <form>
при условии, что при <button>
, если значение <input>
больше 0, то оно не будет скрыто, иначе <div>
будет скрыто?
Как написать javascript и/или jquery, необходимые для этого?
$("#hideToggle").click(function(){
$("#item").find("input").each(function(){
if(this.value <= 0) {
$(this).parent().toggle();
}
});
});
$("#showAll").click(function(){
$("#item").children("div").show();
});
Попробуй это:
$(document).on("click","#hideToggle",function(){
$("#item input").each(function(){
if(!(parseInt($(this).val()) > 0)){
$(this).parent().hide();
}
});
});
Вот код, который также проверяет, является ли значение Number
. Все описания приведены в комментариях:
//attach click listener to the button
$(document).on("click", "#hideToggle", function(){
//get all input type="number", descendant to "#item"
var inputs = $("#item").find("input[type='number']");
//go over each input
$.each(inputs, function(index, elem){
//try to parse it value as a number
var number = parseInt($(elem).val());
//if value is a number
if(!isNaN(number)){
var hideCondition = number <= 0;
if(hideCondition) {
//hide the parent div
$(elem).parent("div").hide();
}
} else {
//do something if value is not a number
}
});
});
value
не является числом (например, текст)?