Question

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

示例：我有一个包含内容的livestream的box div（日程安排信息等），点击该div上的任意位置将替换为实际的livestream嵌入。

这甚至可能吗？

Answer 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]

Answer 2

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

Answer 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？：）

Answer 4

如果您想让 code 保持清洁，您可能需要查看纯CSS演示：

<强> Checkboxy：
http://jsfiddle.net/LaHS4/1/

如果您不喜欢复选框，请尝试此演示：
http://jsfiddle.net/E7zVt/1/

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

4 个答案: