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('#viewport').data('requires')）的证据在这里：http://jsfiddle.net/3StZs/

Answer 3

如果您将它们分开，然后将它们拆分并放入数组中，您可以将它们全部放在一起。

// oops here's plain JS
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/

是否可以在HTML5中拥有多个data- {name}属性？

3 个答案: