jquery 分离重新显示 div 内容时遇到问题

Question

我很难理解 jquery 分离，好吧，分离部分没问题，它让内容返回我遇到了问题。基本上，我有 divs 显示基于复选框的选择，并且它们是基于第 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>

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

jquery 分离重新显示 div 内容时遇到问题

Having trouble with jquery detach reshowing div content

javascript

jquery

css

detach