Question

我是基于网络的应用程序的新手，想要提出有关克隆整个div的问题。我想要做的是：在克隆之后更改src的值。它有一个功能，但在我添加克隆功能后它无法正常工作。

<div id="ytContainer0">
    <embed id="ytsrc" width="800" height="500"
        src="https://www.youtube.com/v/CrHsXTqbwkM" />
</div>

<input id="input" type="text" name="Youtube Source" />
<button id="button" onclick="changeLink();">Click to change source!</button>

<script>
document.getElementById('button').onclick = duplicate;
var i = 0;
function duplicate() {
    var original = document.getElementById('ytContainer' + i);
    var clone = original.cloneNode(true);
    clone.id = "ytContainer" + ++i;
    clone.onclick = duplicate;
    original.parentNode.appendChild(clone);
}
</script>

<script>
function changeLink() {
    var link = document.getElementById("ytsrc");
    ytsrc.src = 'https://www.youtube.com/v/' + input.value;
    return false;
}
</script>

关于jsfiddle：https://jsfiddle.net/4dat1n11/2/

Answer 1

我不确定你要做什么，但你的代码有很多问题：

您的按钮的onclick已在HTML中分配changeLink()，但您在JavaScript document.getElementById('button').onclick = duplicate中的第一行正在覆盖它，因此有效地使用了{{1}永远不会被调用。
您正在克隆changeLink()容器并为其分配新ID，但您还需要为div分配一个新ID，否则最终会有几个{{} 1}}共享相同的ID。
您将embed函数分配给新克隆，该克隆应该在内部显示视频，但需要点击视频才能播放，这意味着克隆上的embed是不会被解雇。
您可能需要删除duplicate()函数并直接调用onclick函数。在这种情况下，您需要更改changeLink()那里。

这是一个有效的例子：

＆＃13;

duplicate()

＆＃13;

src

＆＃13;

如何在用js克隆整个<div>的同时更改<embed />中的src值？

1 个答案: