Question

我有以下动态生成的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>

Answer 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
    }    
});

随时要求解释：）

Answer 2

您可以找到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();

Answer 3

编辑：刚刚注意到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">

，此操作将失败

Answer 4

<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#

Answer 5

<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>

当所有子<div>值都为零时隐藏<div>元素

5 个答案: