javascript - 1 つのデータ属性内に複数のキー/値を格納することは可能ですか?

Question

次のような内部に複数のキー/値を格納できるかどうか疑問に思っていましたdata-attr:

​&lt;a href="#" data-social="network:facebook; socialId:123456789" id="facebook">Facebook</a>

そして、スクリプトでそれらを使用するときは、$('#facebook').data('social.socialId');それぞれを独自の属性に分割するのではなく、そのようなものを選ぶだけですか?

Answer 1

data-*1 つの属性のみに制限する必要もありません。いつでも必要な数だけ使用できます。

​&lt;a href="#" data-social-network="facebook" data-social-id="123456789" id="facebook">Facebook</a>

var socialId = $('#facebook').data('social-id');

---

しかし、それでも主張する場合。JSON 文字列を保存して解析することができます。

​&lt;a href='#' data-social='{ "network": "facebook", "socialId": 123456789 }' id='facebook'>Facebook</a>

var socialId = $('#facebook').data('social').socialId;

JSON オブジェクトは、jQuery によって自動的に解析されます。

Answer 2

次のような属性でJSON形式のデータを保存できます

<div id="myElement" data-json='["value1", "value2", "value3"]'></div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

そしてそれを次のように取得します

var data = JSON.parse($('#myElement').attr('data-json')​);

Answer 3

それらをオブジェクトとして保存します。

$('#facebook').data('social', { network: 'facebook', socialId: 12345679 });

Answer 4

JSONを使用でき、それは自動的に解析されると思います

​&lt;a href="#" data-social="{network:facebook; socialId:123456789}" id="facebook">Facebook</a>

の可能性を作るだろう

$('#facebook').data('social').socialId;