使用 jQuery 隐藏基于输入的 parent 元素
Using jQuery to hide parent elements based on Input
我正在尝试使用 .addClass() 和 .removeClass() 从打印中删除项目。 ul.gform_fields 包含整个部分和每个区域的标题,li.gfield 包含输入区域。
基本思想是在文档加载时将它们全部标记为隐藏 (@media print),然后从包括 parent 容器 ul 项目在内的所有选定项中删除隐藏值。最终目标是删除项目,如果删除了一个类别的所有项目,则也删除该类别。
我可以让列表项工作,但我似乎无法让 parent 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 & 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">.00</span>
<input type="hidden" name="input_31.2" id="ginput_base_price_1_31" value=".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">.00</span>
<input type="hidden" name="input_32.2" id="ginput_base_price_1_32" value=".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">.00</span>
<input type="hidden" name="input_33.2" id="ginput_base_price_1_33" value=".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/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);
});
我正在尝试使用 .addClass() 和 .removeClass() 从打印中删除项目。 ul.gform_fields 包含整个部分和每个区域的标题,li.gfield 包含输入区域。
基本思想是在文档加载时将它们全部标记为隐藏 (@media print),然后从包括 parent 容器 ul 项目在内的所有选定项中删除隐藏值。最终目标是删除项目,如果删除了一个类别的所有项目,则也删除该类别。
我可以让列表项工作,但我似乎无法让 parent 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 & 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">.00</span>
<input type="hidden" name="input_31.2" id="ginput_base_price_1_31" value=".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">.00</span>
<input type="hidden" name="input_32.2" id="ginput_base_price_1_32" value=".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">.00</span>
<input type="hidden" name="input_33.2" id="ginput_base_price_1_33" value=".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/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);
});