Question

我的项目的目标是创建一个匹配的图片游戏，用户点击两个图像。每次之后单击图像的时间，它将翻转到其替换图像。如果两张图片匹配，那么我将删除（或隐藏）这两个图像。删除所有照片后游戏完成。

我有一段HTML代码，如下所示。

<body>
    <img src = "somepicture.jpg" onclick = "SomeFunction()" id = "pic0">
    <img src = "someotherpicture.jpg" onclick = "SomeFunction()"  id = "pic1">
    ...etc...
</body>

我还有JavaScript代码，它生成每个元素并赋予每个元素属性。

每当我生成一个img时，我想将它与一个片段对象链接，我自己宣称。的想法 piece对象是能够存储成员变量状态，它确定图片是否面朝下（未点击）或者面朝上（选中）。但我不确定如何将每个img元素的id属性与piece对象链接起来我创造了。或者，如果这是解决这个问题的最佳方法....

我正在考虑制作一系列的碎片。数组的索引应该与img元素的最后一个字符匹配 id属性。

例如，piece [10]将映射到document.getElementById（“pic10”）。但我不知道如何做到这一点。

提前感谢您的投入！

Answer 1

数组可以包含文本键。使用它。

var pieces = [];
pieces['pic10'] = "active";

Answer 2

对于一个非常简单但不是非常优雅的解决方案，您可以从前缀和数组的索引构建id字符串。

用于映射数组中的索引i，

document.getElementById("pic" + i)

Answer 3

将“click”事件处理程序附加到图像，而不是onclick属性。事件处理程序接收event object作为第一个属性。事件对象的target属性包含对引发事件的dom元素的引用。因此，您可以使用event.target.id获取引发事件的图像的ID。

JavaScript对象和元素ID

3 个答案: