15

この要素から 3 つのデータ値をすべて取得する方法はありますか?

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

これは、私が始めているプロジェクトに非常に役立ちます。これで、必要な js モジュールをロードして、それらを dom にリンクすることができました。奇妙に聞こえるかもしれませんが、ここで何か新しいことを試みています。

4

3 に答える 3

19

あなたの質問に対する答えは、HTML は同じプロパティの複数のインスタンスをサポートしていないということです。その属性を取得する一般的な方法はすべて、3 つのうちの 1 つだけを取得します。

この問題を解決する通常の方法は、属性の 1 つのインスタンスを使用し、複数のパスを値として設定することです。パスの場合、通常はセミコロンで区切ります。

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

次に、コードを使用して多値属性を配列に分割します。

var requiredPaths = document.getElementById("viewport").getAttribute("data-requires").split(";");
于 2012-08-14T23:16:02.577 に答える
10

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/

于 2012-08-14T23:20:00.263 に答える
6

それらを何かで区切ってから分割して配列に入れると、それらをすべて1つにまとめることができます。

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/

于 2012-08-14T23:14:56.507 に答える