javascript - 使用jQuery根据Input隐藏父元素

Question

我正在尝试使用 .addClass() 和 .removeClass() 从打印中删除项目。 ul.gform_fields 包含整个部分和每个区域的标题，li.gfield 包含输入区域。

基本思想是在文档加载(@media print)时将它们全部标记为隐藏，然后从任何选定的(包括父容器 ul 项目)中删除隐藏值。最终目标是删除项目，如果删除一个类别的所有项目，则也删除该类别。

我可以让列表项正常工作，但我似乎无法让父级 UL 切换可见性。

jQuery(document).ready(function($) {
    $("#gform_print_button").click( function()
        {

            $("ul.gform_fields").each(function () {
                $(this).addClass("noPrint");
            });

            $("input.ginput_quantity").each(function () {
              if (this.value == "")
                $(this).parent().parent().addClass("noPrint");
              else                  
                $(this).parent().parent().parent().removeClass("noPrint");
                $(this).parent().parent().removeClass("noPrint");
            });
        //javascript:window.print();
        }
    ); 
})

这是 HTML:

    <ul class="gform_fields">
  <li>
    <h4>Cart &amp; Dollies</h4>
  </li>
  <li class="">
    <span>Daily Rate</span>
    <span>Quantity</span>
  </li>
  <li class="">
    <label for="input_1_31_1">
    </label>
    <div class="ginput_container">
    <input type="hidden" name="input_31.1" value="Furniture Dolly" /> 
    <span >Price:</span> 
    <span id="input_1_31">$6.00</span> 
    <input type="hidden" name="input_31.2" id="ginput_base_price_1_31" value="$6.00" /> 
    <span>Quantity:</span> 
    <input type="text" name="input_31.3" value="" id="ginput_quantity_1_31" class="ginput_quantity" size="10"
    tabindex="24" /></div>
  </li>
  <li class="">
    <label for="input_1_32_1">
    </label>
    <div class="ginput_container">
    <input type="hidden" name="input_32.1" value="Gorilla Cart" class="gform_hidden" /> 
    <span>Price:</span> 
    <span id="input_1_32">$10.00</span> 
    <input type="hidden" name="input_32.2" id="ginput_base_price_1_32" value="$10.00" /> 
    <span>Quantity:</span> 
    <input type="text" name="input_32.3" value="" id="ginput_quantity_1_32" class="ginput_quantity" size="10"
    tabindex="25" /></div>
  </li>
  <li class="">
    <label class="gfield_label" for="input_1_33_1">
    </label>
    <div class="ginput_container ginput_container_singleproduct">
    <input type="hidden" name="input_33.1" value="Magliner / Jr." class="gform_hidden" /> 
    <span>Price:</span> 
    <span id="input_1_33">$15.00</span> 
    <input type="hidden" name="input_33.2" id="ginput_base_price_1_33" value="$15.00" /> 
    <span>Quantity:</span> 
    <input type="text" name="input_33.3" value="" id="ginput_quantity_1_33" class="ginput_quantity" size="10"
    tabindex="26" /></div>
  </li>
</ul>
<ul>
  <li class="">
    <input type="button" id="gform_print_button" class="gform_button button printbtn" value="Print" />
  </li>
</ul>

http://jsfiddle.net/zy87g0Lz/1/

Answer 1

如果我理解正确的话，你正在追求这样的东西？ http://jsfiddle.net/mickatron/zy87g0Lz/6/

尽量避免 DOM 遍历，实际上尝试假装那些父类、兄弟类等方法根本不存在。在大多数情况下，您的代码将更具可读性、模块化并且速度稍快。

我在答案评论中添加了一些其他提示。

jQuery(document).ready(function($) {
  // cache selectors that you reuse
  var $gFormFields = $("ul.gform_fields");
  // hide the whole ul on doc load
  $gFormFields.addClass("noPrint");

    var clickHandler = function(){
    $gFormFields.addClass("noPrint");
    // loop all the li's in the gFormFields
    // superior to looping the input as you don't have to use DOM traversal 
    $("li", $gFormFields).each(function () {
        var $this = $(this);
      var $inputValue = $("input.ginput_quantity", $this).val();
      if ($inputValue){             
        $gFormFields.removeClass("noPrint");
        $this.removeClass("noPrint");
      }else {           
        $this.addClass("noPrint");
      }
    });
  };

  // Use .on() and .off() for all events. In later version of jQ even delegates have been moved to .on();
  // assigning the handler to a function expression allows you to remove that specific handler with .off().
  $("#gform_print_button").on('click', clickHandler);
});