如何让这个玻璃碎片效果在多个div上工作？

Question

情况

我有这个玻璃破碎效果模拟,涉及一些基本的javacsript代码,现在它工作正常; 当您单击徽标时,玻璃会相应地破碎,然后在其位置重新出现一个新的未打印的徽标.

看看这里的jSFiddle:https: //fiddle.jshell.net/9n9ft9ks/3/

问题

现在,页面上只有一个徽标.我需要有一个以上的徽标,可能就像五个(同一个Floyd的autoglass徽标)都在同一页面上,都具有相同的onClick玻璃碎片效果.但是当我自己尝试这样做 - 在页面上放置多个(相同的徽标)时,代码就会中断.

我是怎么试图修复它的

带有玻璃破碎效果的徽标是一个名为" #container" 的div .因为我想在页面上不止一个这样的徽标,所以我尝试<div id="container"></div>在HTML代码中多次" 删除" .这不起作用:https: //fiddle.jshell.net/9n9ft9ks/5/

所以我尝试将div更改id为div,class然后编辑了所有需要更改的javascript和CSS行:

document.getElementById('container'); 至: document.getElementsByClassName('container');

和

#container: {} 至 .container{}

但这对我来说似乎也没有用.在进行这些更改后,徽标甚至不再显示在页面上,请查看此处:https://fiddle.jshell.net/9n9ft9ks/4/

摘要

我有一个带有onClick玻璃碎片效果的徽标.页面上只有一个徽标.我需要在页面上有多个,但似乎无法让它自己工作...如果有人可以看看代码并尝试让它工作,所以有不止一个徽标页面,我会非常感激!这是最初的jSfiddle:https://fiddle.jshell.net/9n9ft9ks/3/

Answer 1

在您的尝试中，尝试更改getElementByClassNamefor$('.container')然后替换appendChildby append。

我让它工作了，但是有点乱，需要更多的 CSS 来使徽标不会相互重叠。

（您可以在第二个 div 上添加样式以查看多个徽标，例如<div class="container" style="left: 50px;"></div>：）

这是jsfiddle： https: //fiddle.jshell.net/9n9ft9ks/7/