直接点击时替换 <div>答案

【问题标题】：Replace <div> When Directly Clicked直接点击时替换 <div>
【发布时间】：2011-08-27 22:26:03
【问题描述】：

我正在寻找一些 JS 代码，它可以在单击时将 div 替换为另一个。没有外部链接或按钮，只需在原始 div 中的任意位置单击时将 div 交换为新的。我还想这样做，以便一旦单击并交换第二次单击它就不会将其交换回来。

示例：我有一个用于直播的框 div，其中包含内容（计划信息等），单击该 div 上的任何位置都会将其替换为实际嵌入的直播。

这可能吗？

【问题讨论】：

【解决方案1】：

不明白为什么每个人都在提供 jQuery 解决方案。这是一个纯 JavaScript 的：

var livestream = document.getElementByID('livestream');

document.getElementById('schedule').onclick = function() {
    this.parentNode.replaceChild(livestream, this);
};

这里我假设替换是 DOM 的一部分。当然你也可以用document.createElement ^[MDN]动态生成。

我不知道你想对被替换的元素做什么。它由replaceChild 方法返回，因此您可以将其插入到您想要的任何位置。

参考：.replaceChild() ^[MDN]

【讨论】：

+1 用于纯 JavaScript（我自己已经习惯了 jQuery，以至于我会自动想到它），但在您的解决方案中，#someId 似乎位于页面上的某个位置，这将使直播开始在页面加载而不是点击时。
@Cyril：嗯，我不知道livestream 在哪里。它也是动态生成的。不过我会提到它，谢谢。
我什至不知道有一个.replaceChild() 方法...谢谢！

【解决方案2】：

$("#div").click(function(){
   $(this).html('what to write into that div?');
});

【讨论】：

【解决方案3】：

<div id= "wrapper">
    <div id= "schedule">
        Skedule shedule
    </div>

    <div id= "livestreamWrapper" style= "display: none;">
    </div>
</div>

<script type= "text/javascript">
$("#schedule").click(function()
{
    $(this).hide();
    $("#livestreamWrapper").show()
                           .append(/*actual livestream here*/);
});
</script>

我建议将#schedule 和#livestreamWrapper 都包装在一个div 中（在我的示例中为#wrapper），这样可以减少定位问题。

对于禁用 javascript 的访问者可能会采取一些预防措施（例如，最初使两个 div 可见，附加实际直播，隐藏 #livestreamWrapper 并删除 document.ready 上的实际直播），但是否有人观看直播但没有启用javascript？ :)

【讨论】：

【解决方案4】：

如果你想保持 code 干净，你可能想看看纯 CSS 演示：

复选框：
http://jsfiddle.net/LaHS4/1/

如果你不喜欢复选框，那么试试这个演示：
http://jsfiddle.net/E7zVt/1/

【讨论】：