HTML5 中是否可以有多個 data-{name} 屬性？

Question

有沒有辦法從此元素中獲取所有 3 個數據值？

 <div id="viewport" 
    data-requires='js/base/paths'
    data-requires='js/base/dialog'
    data-requires='js/base/notifier'>

這對我正在啟動的項目非常有用。 有了這個，我可以加載所需的 js 模塊並將它們鏈接到 dom。 我知道這聽起來可能很奇怪，但我正在嘗試一些新的東西。

Answer 1

您的問題的答案是 HTML 不支持同一屬性的多個實例。 您可能會檢索該屬性的所有典型方法只會檢索這三種方法中的一種。

解決這個問題的通常方法是使用屬性的單個實例並將多個路徑作為值。 對於路徑，它們通常用分號分隔。

<div id="viewport" data-requires='js/base/paths;js/base/dialog;js/base/notifier'>

並且，然后使用代碼將多值屬性分解為數組。

var requiredPaths = document.getElementById("viewport").getAttribute("data-requires").split(";");

Answer 2

您可以在data-屬性中使用更復雜的結構。

取而代之的是：

<div id="viewport" 
data-requires='js/base/paths'
data-requires='js/base/dialog'
data-requires='js/base/notifier'>

你可以這樣做：

<div id="viewport"
data-requires='["js/base/paths", "js/base/dialog", "js/base/notifier"]'>
</div>

使用jQuery.data()證明jQuery.data()這種方式檢索數組： jQuery('#viewport').data('requires') ）在這里： http : //jsfiddle.net/3StZs/

Answer 3

如果您用某種東西將它們分開，然后將它們分開並放在一個數組中，則可以將它們全部放在一起。

var arrayData = document.getElementById('viewport').getAttribute('data-requries');
var arr = arrayData.split(',');

for (i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

http://jsfiddle.net/S7D2D/1/