javascript - 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 片段:

复选框代码:

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