JS - 自定义图像属性

问题描述：

我需要能够定义的事实，即a board game tile like this one顶边有一个城市，左边和底边的道路和右边的草地。JS - 自定义图像属性

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

答

可以使用自定义属性，如toske说，但我会建议您创建场景的数据对象模型表示（使用JSON），并处理此模型来呈现你的界面。编号：Here is an example。数据是包含表示每个图块的一些对象的图块数组。我使用jQuery，但是你可以使用你想要的JavaScript库。我建议你学习jQuery，如果你不知道如何使用它。这是一个非常强大和简单的图书馆。

我使用JQuery创建了一个调用函数，它显示了在游戏过程中任何时候绘制给定片断的可能性，因此，简单地扩展我的JQuery模型似乎是合乎逻辑的。我甚至需要进入JSON，如果我使用JQuery对象，那么我完全不熟悉JSON对象吗？ –

嗨。我认为你必须熟悉JSON，因为它使用了很多。这很容易理解。 JSON是一种数据交换格式，如XML。我用来创建瓷砖阵列的sintax不是正确的JSON，但它几乎相同。在您的软件中，您将使用JSON（在服务器上）创建JavaScript对象，并在您的JavaScript客户端代码中获取这些数据，这会将JSON表示（字符串）转换为对象。看看这里http://json.org/在页脚中，有很多例子。 – davidbuzatto

答

你绝对可以把自定义属性在HTML5标记，如：

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

虽然我宁愿建议只标注有编号的img标签，然后有一个ID的映射到像连接数据的JSON对象：

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

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

您的属性不应该以“data-”作为前缀吗？ – Gho5t

“左连接”或“右连接”属性不是HTML5;如果它是'data-left-connection'，它们会是。不同的是'data'部分实际上是支持的。你可以在[MDN]（https://developer.mozilla.org/en/HTML/Global_attributes）找到更多信息。 – MilkyWayJoe

你说得对，我的道歉属性必须有数据前缀。 – toske

答

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

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

JS - 自定义图像属性

相关推荐