javascript - Having trouble with jquery detach reshowing div content -
i having hard time wrapping head around jquery detach, well, detach part ok, it's getting content come having issue with. basically, have divs display based on selections checkbox, , alternating styles based on nth row, primary issue when row hidden technically still there styles weren't alternating correctly. found jquery detach searching solution nth row issue , seems right direction, new , having trouble. here javascript have:
$(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 uncheck box filter, rows displaying correctly style, when re-check box, div isn't coming back. thank can provide.
edit: adding snippets of 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 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 div </div> </div> </div> </div> </div> </div>
edit: desired result:
here sample of how page behave:
x 10 x 20 x 30 result 10 // style-a result 10 // style-b result 20 // style-a result 20 // style-b result 20 // style-a result 30 // style-b result 30 // style-a
then if box unchecked:
x 10 _ 20 x 30 result 10 // style-a result 10 // style-b result 30 // style-a result 30 // style-b
then if rechecked:
x 10 x 20 x 30 result 10 // style-a result 10 // style-b result 20 // style-a result 20 // style-b result 20 // style-a result 30 // style-b result 30 // style-a
run this. uses detach, saves copy of jquery data , adds when needed.
$(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 div </div> </div> </div> </div> </div> </div>
Comments
Post a Comment