jQuery遇到麻煩，無法重新顯示div內容

Question

我很難把頭放在jquery detach上，好了，detach部分還可以，它讓內容回來了，我遇到了問題。 基本上，我有基於復選框選擇顯示的div，它們是基於第n行的交替樣式，因此主要問題是，當隱藏行時，技術上它仍然存在，因此樣式無法正確交替。 我發現jquery detach正在尋找第n行問題的解決方案，這似乎是正確的方向，但我是新手，遇到了麻煩。 這是我擁有的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();
       }
});
});

現在，當我取消選中要過濾的框時，行將正確顯示樣式，但是當我重新選中該框時，div不會返回。 感謝您提供任何幫助。

編輯：添加HTML的摘要：

復選框代碼：

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

樣本輸出行（包裝在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>

編輯：所需的結果：

以下是我希望頁面的行為示例：

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

然后，如果未選中復選框：

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

然后，如果重新檢查：

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

Answer 1

運行這個。 這使用分離，保存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>