javascript - JS--自定义图片属性

Question

我需要能够定义这样一个事实，即像这样的棋盘游戏图块的上边缘有一座城市，左边缘和下边缘有道路，右边缘有草。

我怎样才能做到这一点？从我读到的关于 HTML5 自定义数据属性的内容来看，它们似乎是一个可行的选择（例如，“data-left='road'...”），但我希望在获得更多编码经验之前得到确认深入项目。有什么想法吗？

Answer 1

是的，您可以在 HTML 5 中使用自定义数据属性。只需在它们前面加上“data-”，例如

<img src="foo.jpg" data-some-arbitrary-attribute="foo" />

Answer 2

您可以使用 toske 所说的自定义属性，但我建议您创建场景的数据对象模型表示（使用 JSON），然后他们处理此模型以呈现您的界面。

编辑：这是一个例子。数据是包含一些代表每个图块的对象的图块数组。我使用了 jQuery，但你可以使用你想要的 JavaScript 库。如果您不知道如何使用它，我建议您学习 jQuery。这是一个非常强大和简单的库。

Answer 3

您绝对可以将自定义属性放在 HTML5 标记中，例如：

    <img left-connection="road" right-connection="railroad"... />

虽然我宁愿建议只用 id 标记 img 标签，然后有一个 JSON 对象将 ID 映射到连接数据，例如：

    <img id="a11" src="..." />

    <script type="text/javascript> 
       var connectivityData = { a11 : { left : 'road',right:'railroad'}}
    </script>