Question

我很难将头围绕着jquery分离，好吧，分离部分没问题，它让内容回来我遇到了问题。基本上，我有基于复选框选择显示的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>

jquery分离有问题重新显示div内容

1 个答案: