如何在多个 div 上实现玻璃破碎效果？

Question

情况

我有一个包含一些基本javascript代码的玻璃破碎效果模拟，目前它可以正常工作；当你点击标志时，玻璃会相应地破碎，然后一个新的未破碎的标志会出现在原来的位置。

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

问题

目前，在页面上只有一个标志。 我需要有多个标志，可能像五个（相同的Floyd's autoglass标志）都在同一页上，并且都具有相同的onClick玻璃破碎效果。但是当我尝试自己做这件事时 - 在页面上放置多个（相同的标志），代码就会崩溃。

我如何尝试修复它

带玻璃碎片效果的标志是一个名为"#container"的div。因此，由于我想在页面上有多个这样的标志，我尝试在HTML代码中只是复制"<div id="container"></div>"几次。但那行不通： https://fiddle.jshell.net/9n9ft9ks/5/ 所以我尝试将

id

更改为

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/

- user1658560

---

请注意，当您使用 document.getElementsByClassName('container'); 时，将会返回多个元素。我注意到在控制台中出现了错误，因为您正在尝试对包含多个元素的数组中的容器执行 container.appendChild... 而不是只有一个元素对象。 - camiblanch

FYI，在大多数情况下，复制 id 是行不通的。浏览器会定位到第一个具有该 id 的实例并忽略其余内容，因为 id 应该是唯一的。非唯一的 id 会导致意外和错误的脚本行为。 - Surreal Dreams

你试过我的建议了吗？ - user5306470

Answer 1

您不能在同一页上多次使用相同的ID，应该使用类代替：

CSS：

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

HTML：

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

- user5306470

Answer 2

在你的尝试中，尝试将 getElementByClassName 更改为 $('.container')，然后用 append 替换 appendChild。

我让它工作了，但有点凌乱，需要更多的 CSS 来使标志不重叠。

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

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

- Oylex

---

感谢你的帮助！不过很遗憾我还是没能让它正常工作。如果你能在 jSfiddle 上发布一个具有多个标志的实现示例，那就太好了！ - user1658560

有两个标志。这很好。但是在你的jSfiddle中，玻璃破碎效果不起作用。:( 当你点击标志时，它们应该破碎。 - user1658560

@user1658560 它确实会破碎，但它出现在上方。 - user5306470