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

Posted 2023-02-16

【中文标题】jquery detach 重新显示 div 内容时遇到问题

【英文标题】：Having trouble with jquery detach reshowing div content

【发布时间】：2015-05-15 01:46:19

【问题描述】：

我很难理解 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

【问题讨论】：

可以添加html吗？

planWrap , detachedContent 相同的缓存选择器？

@guest271314，我不知道该放什么，如果我删除那条线它仍然可以正常工作以便它分离，但我无法让它回来

不完全确定预期的结果是什么，在这里？不确定两个html sn-ps 如何出现在文档中？ .classes 元素没有出现在 html ？不过，乍一看可以尝试使用 .clone() api.jquery.com/clone 而不是在 planWrap ， detachedContent 之一处复制元素？

仍然没有概念化预期的结果。虽然html 在第一个<span></span> 之后似乎有</a> 标签，并且在第一个html sn-p 的末尾有额外的</div>。

【参考方案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>

【讨论】：

我试过只使用显示和隐藏，我遇到的问题是每个返回的 div 应该是使用第 n 行的交替样式。当我刚刚执行planWrap.hide(); 时，它设置为style="display:none;"，所以第n 行仍在计算它，我得到：style-a -- style-a -- style-b -- style-a

谢谢，这主要是可行的，只是现在将分离的内容拉入样式化的 div 时遇到了一些问题，但它比我能得到的要近得多。

我修复了我的样式问题，但你的解决方案太好了哈哈。在我的初始页面上，我将显示限制为显示 10 个速度中的 2 个，20 个中的 2 个，30 个中的 2 个。我总共有 5 10 个速度，当我分离时它隐藏了所有 5 个速度，然后当我return it 它返回所有 5 个，而不仅仅是原来的 2 个，但是，它可以工作，只是需要做更多的调整。非常感谢。