[英]Having trouble with jquery detach reshowing div content
I am having a hard time wrapping my head around jquery detach, well, the detach part is ok, it's getting the content to come back I am having an issue with. 我很难把头放在jquery detach上,好了,detach部分还可以,它让内容回来了,我遇到了问题。 Basically, I have divs that display based on selections from a checkbox, and they are alternating styles based on nth row, so the primary issue was that when a row was hidden it was technically still there so the styles weren't alternating correctly.
基本上,我有基于复选框选择显示的div,它们是基于第n行的交替样式,因此主要问题是,当隐藏行时,技术上它仍然存在,因此样式无法正确交替。 I found jquery detach searching for a solution to my nth row issue and it seems like the right direction, but I am new to it and having trouble.
我发现jquery detach正在寻找第n行问题的解决方案,这似乎是正确的方向,但我是新手,遇到了麻烦。 Here is the javascript I have:
这是我拥有的JavaScript:
$(document).ready(function () {
$(".classes input[type='checkbox']").click(function(e) {
var innerTextHTML = $(this).parent("div.selection").children('label').text();
var planWrap = $("div.plan."+innerTextHTML).parent();
var detachedContent = $("div.plan."+innerTextHTML).parent();
if ($(this).is(':checked')){
planWrap.show();
detachedContent.appendTo('div.plans-container');
}else{
planWrap.detach();
}
});
});
Now, when I uncheck the box to filter, the rows are displaying correctly with style, but when I re-check the box, my div isn't coming back. 现在,当我取消选中要过滤的框时,行将正确显示样式,但是当我重新选中该框时,div不会返回。 Thank you for any help you can provide.
感谢您提供任何帮助。
EDIT: Adding snippets of HTML: 编辑:添加HTML的摘要:
Checkbox code: 复选框代码:
<div class="speeds" id="int_div_id">
<h4>Speeds:</h4>
<div class="checks">
<div class="selection">
<input type="checkbox" id="10" name="chkSpeedType" value="10" checked="checked">
<label for="10"><span></span>10</a></label>
</div>
<div class="selection">
<input type="checkbox" id="20" name="chkSpeedType" value="20" checked="checked">
<label for="20"><span></span>20</label>
</div>
<div class="selection">
<input type="checkbox" id="30" name="chkSpeedType" value="30" checked="checked">
<label for="30"><span></span>30</label>
</div>
</div>
</div>
Sample output row (wrapped within the plans-container div): 样本输出行(包装在plans-container div中):
<div class="plans-container">
<div class="plans plansSlider" id="listings">
<div class="bundle-hide-me" id="default"><div class="plan-wrap">
<div class="plan 10">
<div class="items-wrap">
<div class="items">
// content of the div
</div>
</div>
</div>
</div>
</div>
</div>
EDIT: Desired result: 编辑:所需的结果:
Here is a sample of how I would like the page to behave: 以下是我希望页面的行为示例:
X 10 X 20 X 30
Result for 10 // style-a
Result for 10 // style-b
Result for 20 // style-a
Result for 20 // style-b
Result for 20 // style-a
Result for 30 // style-b
Result for 30 // style-a
Then if a box is unchecked: 然后,如果未选中复选框:
X 10 _ 20 X 30
Result for 10 // style-a
Result for 10 // style-b
Result for 30 // style-a
Result for 30 // style-b
Then if rechecked: 然后,如果重新检查:
X 10 X 20 X 30
Result for 10 // style-a
Result for 10 // style-b
Result for 20 // style-a
Result for 20 // style-b
Result for 20 // style-a
Result for 30 // style-b
Result for 30 // style-a
Run this. 运行这个。 This uses the detach, saves a copy of jquery data and adds it back when needed.
这使用分离,保存jquery数据的副本,并在需要时将其添加回去。
$(document).ready(function () { var detachedContent; $("input[type='checkbox']").click(function(e) { var innerTextHTML = $(this).parent("div.selection").children('label').text(); var planWrap = $("div.plan."+innerTextHTML).parent(); if ($(this).is(':checked')){ planWrap.show(); $('div.plans-container').append(detachedContent); }else{ detachedContent = planWrap.detach(); } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="speeds" id="int_div_id"> <h4>Speeds:</h4> <div class="checks"> <div class="selection"> <input type="checkbox" id="10" name="chkSpeedType" value="10" checked="checked"> <label for="10"><span></span>10</a></label> </div> <div class="selection"> <input type="checkbox" id="20" name="chkSpeedType" value="20" checked="checked"> <label for="20"><span></span>20</label> </div> <div class="selection"> <input type="checkbox" id="30" name="chkSpeedType" value="30" checked="checked"> <label for="30"><span></span>30</label> </div> </div> <div class="plans-container"> <div class="plans plansSlider" id="listings"> <div class="bundle-hide-me" id="default"><div class="plan-wrap"> <div class="plan 10"> <div class="items-wrap"> <div class="items"> // content of the div </div> </div> </div> </div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.