作成日:2018-01-09, 更新日:2018-01-09
基本
・HTML5になる。
・「data-〇〇〇」の「〇〇〇」は小文字にする
・「data-〇〇〇」の値は数値やbool値などに変換してくれている
▼HTMLで設定
<div id="hoge" data-kushi="鳥精">〇〇〇</div>
▼jqueryで取得
var dataVal = $('#hoge').data('kushi');
複数指定
▼HTMLで設定
<div id="hoge" data-kushi="鳥精" data-taste="たれ">〇〇〇</div>
▼jqueryで取得
var dataA = $('#hoge').data('kushi'); var dataB = $('#hoge').data('taste');
配列でまとめて指定
「"」ではなく「'」でくくらないとダメな感じ
▼HTMLで設定
<div id="hoge1" data-order='["鳥精", "たれ"]'>〇〇〇</div> <div id="hoge2" data-order="['鳥精', 'たれ']">〇〇〇</div>
▼jqueryで取得
var dataOrder1 = $('#hoge1').data('order'); // dataOrder1[0]、dataOrder1[1]に格納されている var dataOrder2 = $('#hoge2').data('order'); // dataOrder2は配列ではなく「['鳥精', 'たれ']」という文字列が格納される
オブジェクト(連想配列)で指定
▼HTMLで設定
<div id="hoge" data-order='{"kushi":"鳥精", "taste":"たれ"}'>〇〇〇</div>
▼jqueryで取得
var dataOrder = $('#hoge').data('order'); // dataOrder.kushi、dataOrder.tasteに格納されている
jqueryで値変更
「.data()」はキャッシュのみ変更となる。キャッシュのみの変更だと後で面倒なコトになるので、「.attr()」も同時に指定するのが無難。
$('#hoge').data('order', 値); $('#hoge').attr('data-order', 値);