Question

场合

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

在这里查看 jSFiddle ： https://fiddle.jshell.net/9n9ft9ks/3/

问题

目前，网页上只有一个徽标。 我需要有多个徽标 ，可能就像五个（同一个Floyd＆＃39的autoglass徽标） 都在同一页面上 ，都具有相同的onClick玻璃碎片效果。但是当我自己尝试这样做 - 在页面上放置多个（相同的徽标）时，代码就会中断。

我是如何尝试修复的

带有玻璃破碎效果的徽标是一个名为＆＃34; #container＆＃34;的div。因此，由于我想在页面上显示多个这样的徽标，所以我尝试了对＃34; <div id="container"></div>＆＃34; HTML代码中的很多次。那不起作用： https://fiddle.jshell.net/9n9ft9ks/5/

所以我尝试将div id更改为div class，然后我编辑了所有相应的javascript＆amp;需要更改的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

您无法在同一页面上多次使用单个ID 改为使用一个类：

CSS：

.className {
    /* attributes: values; */
}

HTML：

<div class="className"></div>

Answer 2

在您的尝试中，尝试更改getElementByClassName的{{1}}，然后将$('.container')替换为appendChild。

我让它工作了，但它有点乱，它需要更多的CSS才能使徽标彼此不重叠。

（您可以在第二个div上添加样式以查看多个徽标，例如：append）

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

如何让这个玻璃破碎效果适用于多个div？

2 个答案: