Javascript 分离然后附加Div

我一直在使用这个脚本，它让人难以置信，因为它看起来应该可以正常工作，但事实并非如此。所以我向你们所有人求助，希望你们能多看一眼我所缺少的东西

情景：基本上，我要做的是单击detach a div，然后当选择另一个单选按钮时，将div追加回其位置

我包含了一个JSFIDLE，因此您可以看到我可能没有完全偏离轨道：

装载时，用户将看到两个选项，支架或充气式，支架尺寸上选择默认尺寸，其他型号尺寸隐藏。这很好。我知道最终我想将第一行代码从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();
            }
        });    
    });

请让我知道我错过了什么。基本上我这样做的原因是

以减少前端和前端的混乱

因为默认设置（两种尺寸）会在产品订单信息中混合，所以如果我可以清除“其他宽度检查”单选按钮或“分离”并防止其被看到，我认为效果会很好

---

.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（）

的返回值，因此修剪的分支将丢失并被垃圾收集。

$（）

在当前的活动dom树上工作。如果有

$（'#foo'）.detach（），$（'#foo'）.something other（）

，则调用something other将失败，因为活动dom树中不再有#foo元素。