分离然后附加 Div答案

【问题标题】：Detach then Append Div分离然后附加 Div
【发布时间】：2014-10-28 15:03:12
【问题描述】：

我一直在使用这个脚本，它令人难以置信，因为它看起来应该可以正常工作，但事实并非如此。因此，我请大家多多关注我所缺少的东西。

情况：基本上，我想要做的是点击分离a div，然后选择另一个单选按钮时，将div附加到其位置。

我已经包含了一个 JSFiddle，所以你可以看到我可能不会完全偏离轨道：http://jsfiddle.net/heykate/pusk6ezx/

加载时，用户会看到两个选项，支撑或充气，在支撑尺寸上选择默认尺寸，隐藏其他型号尺寸。这很好。我知道最终我想将第一行代码从 hide() 更改为 detach()。

一旦我点击第二个样式选项，它会显示第二个模型的宽度，就像它应该的那样，但是如果我要切换回第一个样式选项。我最初分离的 div 仍然是隐藏的，不会 .append() 在我的代码中。

这是我的脚本的样子：

$(document).ready(function(){
    $('#5e8a1520d82ed2834919fda63f4a3f84').hide();            
    $('input[type="radio"]').change(function(){
             if($(this).attr("value")=="489"){
                $( "#b6304c97422f08727702021e2c6c7cda" ).append( ".rightCol" );
                $("#5e8a1520d82ed2834919fda63f4a3f84").detach();                
              }
             if($(this).attr("value")=="488"){
                $("#b6304c97422f08727702021e2c6c7cda").detach();
                $("#5e8a1520d82ed2834919fda63f4a3f84").show();
            }
        });    
    });

请让我知道我缺少什么。基本上我这样做的原因是

为了减少前端的混乱和
因为设置了默认值（对于两种尺寸），它们会在产品订单信息中混在一起，所以如果我可以清除其他宽度选中的单选按钮或分离并阻止它被看到，我认为它会解决很好。

【问题讨论】：

标签： javascript jquery append detach

【解决方案1】：

.detach 从 DOM 中移除元素。由于它不再在 DOM 中，因此当您稍后尝试 .show() 它时，它不再在 dom 中，因此无法找到/可用。这就是为什么 .detach() 返回你删除的节点，以防你想重新使用它：

foo = $('#blahblah').detach(); // 'foo' now contains the detached now

$('#otherplace').attach(foo);  // reinsert the foo element we detached.

【讨论】：

既然 foo = a detach 不会附加只是否定它，它仍然会呈现为一个分离的项目？
是的，如果你运行这个确切的代码。我不知道你为什么要分离。为什么不只是.hide() 你不想看到的元素呢？ detach 修改了 DOM 树并从物理上删除了一些东西。
我最初将它设置为只是隐藏，现在在我们的页面上实现，但是隐藏 div 的单选按钮是预先选择的，因此它与可见的选择相结合。如果这有意义的话。
明白了。但无论如何，您正在通过物理移除（“修剪”）来修改树。一旦你修剪了树的一个分支，它就不再是树的一部分，并且由于你没有捕获 .detach() 的返回值，你修剪的分支会丢失并被垃圾收集。
$() 在当前的 live dom 树上工作。如果你有$('#foo').detach(), $('#foo').something_else()，则其他调用将失败，因为活动的 dom 树中不再有 #foo 元素。