jquery detach 重新显示 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 的 sn-ps：

复选框代码：

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

示例输出行（包装在计划容器 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>