我有以下动态生成的HTML。 “ points__fees__value__item” div的数量是可变的。
<div class="points__fees">
<div class="points__fees__label">Fees / Charges</div>
<div class="points__fees__value">
<div class="points__fees__value__item" data-type="star$">
<span class="points__fees__text">63,000</span> Star $
<input class="points__fees__input" value="63000" type="hidden">
</div>
<div class="points__fees__value__item" data-type="diamond$">
<span class="points__fees__text">50,000</span> Diamond $
<input class="points__fees__input" value="50000" type="hidden">
</div>
<div class="points__fees__value__item" data-type="gold$">
<span class="points__fees__text">0</span> Gold $
<input class="points__fees__input" value="0" type="hidden">
</div>
</div>
</div>
此HTML是较大的HTML表单的一部分。根据用户的输入,“ points__fees__text”范围和输入“ value”属性的值将使用jQuery和JavaScript进行相应更改。到目前为止,所有这些都工作正常。
有一个要求,如果所有输入元素的“值”属性中的所有值都为0,则应隐藏整个“ points__fees” div。换句话说,当发生以下情况时,整个“ points__fees” div应该被隐藏。如何使用jQuery或仅JavaScript进行此检查?
<div class="points__fees">
<div class="points__fees__label">Fees / Charges</div>
<div class="points__fees__value">
<div class="points__fees__value__item" data-type="star$">
<span class="points__fees__text">0</span> Star $
<input class="points__fees__input" value="0" type="hidden">
</div>
<div class="points__fees__value__item" data-type="diamond$">
<span class="points__fees__text">0</span> Diamond $
<input class="points__fees__input" value="0" type="hidden">
</div>
<div class="points__fees__value__item" data-type="gold$">
<span class="points__fees__text">0</span> Gold $
<input class="points__fees__input" value="0" type="hidden">
</div>
</div>
</div>
答案 0 :(得分:1)
您可以将change事件绑定到您的输入字段并检查其值:
$(".points__fees__input").bind("change", function() { // bind change event to all input fields
var count = 0;
$(".points__fees__input").each(function() { // iterate over all 3 input fields
((this.val() == 0) ? count += 1 : return false); // if current value is 0, count++, otherwise stop .each()
});
if (count == 3) {
$(".points__fees").hide(); // hide if all are 0
}
});
随时要求解释:)
答案 1 :(得分:1)
您可以找到equals
的元素数,并将其总数与value="0"
与类hide()
的最接近元素进行比较:
points__fees
var count = $('.points__fees__input[value="0"]').filter(function(){
return this.value === "0";
}).get();
if($('.points__fees__input[value]').length == count.length)
$('.points__fees__input[value="0"]').closest('.points__fees').hide();
答案 2 :(得分:0)
编辑:刚刚注意到Manum's的答案。这非常相似,只是更加简化了。
将以下内容添加到您现有的JavaScript方法中:
$(".points__fees").toggle($(".points__fees input[type='hidden']").filter(function(){return this.value !== '0'}).length !== 0);
filter
方法返回目标div中所有值都不为0的元素。然后,如果从toggle
返回的元素超过0,则使用filter
设置可见性
示例:
//This is emultating whatever you have now
$("#test").on("input", function() {
//This simulates your existing value updates
$(".points__fees input[type='hidden']").val($(this).val());
$(".points__fees__text").html($(this).val());
//This performs the hide/show
/* Original Compact Version */
$(".points__fees").toggle($(".points__fees input[type='hidden']").filter(function() {
return this.value !== '0'
}).length !== 0);
/*This is the expanded Version of the above to illustrate the concepts
var nonZeroFields = $(".points__fees input[type='hidden']").filter(function(){
return this.value !== '0'});
var showDiv = nonZeroFields.length !== 0;
console.log(showDiv);
$(".points__fees").toggle(showDiv);
*/
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<label>This is replicated in all fields:</label> <input type="text" id="test" />
</div>
<div class="points__fees">
<div class="points__fees__label">Fees / Charges</div>
<div class="points__fees__value">
<div class="points__fees__value__item" data-type="star$">
<span class="points__fees__text">?</span> Star $
<input class="points__fees__input" value="?" type="hidden">
</div>
<div class="points__fees__value__item" data-type="diamond$">
<span class="points__fees__text">?</span> Diamond $
<input class="points__fees__input" value="?" type="hidden">
</div>
<div class="points__fees__value__item" data-type="gold$">
<span class="points__fees__text">?</span> Gold $
<input class="points__fees__input" value="?" type="hidden">
</div>
</div>
</div>
注意,如果有多个<div class="points__fees">
答案 3 :(得分:-1)
<script >
function validate() {
if (document.getElementById("span1").innerHTML == 0 && document.getElementById("span2").innerHTML ==0 && document.getElementById("span3").innerHTML ==0) {
document.getElementById("fee").hidden = true;
}
}
</script>
https://stackoverflow.com/posts/51702705/edit#
答案 4 :(得分:-2)
<script >
function validate() {
if (document.getElementById("span1").innerHTML == 0 && document.getElementById("span2").innerHTML ==0 && document.getElementById("span3").innerHTML ==0) {
document.getElementById("fee").hidden = true;
}
}
</script>
https://stackoverflow.com/posts/51702705/edit#
<div>
<div class="points__fees" id="fee">
<div class="points__fees__label">Fees / Charges</div>
<div class="points__fees__value">
<div class="points__fees__value__item" data-type="star$">
<span class="points__fees__text" id="span1">0</span> Star $
<input class="points__fees__input" id="input0" value="0" type="hidden">
</div>
<div class="points__fees__value__item" data-type="diamond$">
<span class="points__fees__text" id="span2">0</span> Diamond $
<input class="points__fees__input" value="0" type="hidden">
</div>
<div class="points__fees__value__item" data-type="gold$">
<span class="points__fees__text" id="span3">0</span> Gold $
<input class="points__fees__input" value="0" type="hidden">
</div>
</div>
</div>