JS - 自定義圖像屬性

我需要能夠定義的事實，即a board game tile like this one頂邊有一個城市，左邊和底邊的道路和右邊的草地。JS - 自定義圖像屬性

我該怎麼做？從我讀到的HTML5自定義數據屬性看，他們看起來像是一個可行的選擇（例如，「data-left ='road'...」），但我希望在獲得更多的編碼經驗之前，獲得確認深入該項目。有什麼想法嗎？

2012-06-28 Bart Riordan

可以使用自定義屬性，如toske說，但我會建議您創建場景的數據對象模型表示（使用JSON），並處理此模型來呈現你的界面。編號：Here is an example。數據是包含表示每個圖塊的一些對象的圖塊數組。我使用jQuery，但是你可以使用你想要的JavaScript庫。我建議你學習jQuery，如果你不知道如何使用它。這是一個非常強大和簡單的圖書館。

來源

2012-06-28 20:31:24 davidbuzatto

我使用JQuery創建了一個調用函數，它顯示了在遊戲過程中任何時候繪製給定片斷的可能性，因此，簡單地擴展我的JQuery模型似乎是合乎邏輯的。我甚至需要進入JSON，如果我使用JQuery對象，那麼我完全不熟悉JSON對象嗎？ –

嗨。我認爲你必須熟悉JSON，因爲它使用了很多。這很容易理解。 JSON是一種數據交換格式，如XML。我用來創建瓷磚陣列的sintax不是正確的JSON，但它幾乎相同。在您的軟件中，您將使用JSON（在服務器上）創建JavaScript對象，並在您的JavaScript客戶端代碼中獲取這些數據，這會將JSON表示（字符串）轉換爲對象。看看這裏http://json.org/在頁腳中，有很多例子。 – davidbuzatto

-2

你絕對可以把自定義屬性在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>

來源

2012-06-28 20:28:11 toske

您的屬性不應該以「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" />

來源

2012-06-28 20:30:36 Gho5t

JS - 自定義圖像屬性

回答

相關問題