data()の用途とは

html要素にデータ(プロパティ名と値)、objectオブジェクト(連想配列)を指定できるjqueryのdataメソッドについて質問です。
html要素に変数や連想配列を指定できるということにピンとこないのですが、html要素に変数や連想配列を指定することでどのような長所や利用方法がありますか。

下記のページ以外での利用方法や長所が知りたいです。
http://www.jquerystudy.info/reference/data/data.html

mpyw

2016/03/23 12:39 編集

https://w3g.jp/blog/jquery-data-attr-cache http://qiita.com/toshiharu-irie/items/e7f803085000c4008f51 もう使わない方がいい感じですね．datasetですが既にIE10以下の面倒を見る必要性はほとんどなくなってきているので，特殊な状況でないかぎり使ってもいいと思います．

aaaaaaaa

2016/03/28 09:41

ご回答有難うございます。data()だとhtmlの属性が変化しないし、attrだとオブジェクトに介入できないから属性しか変更できないということですね。とても勉強になりました。

行動規範の内容に同意します

回答4件

新しいブラウザだと、dataset や WeakMap があるのでいらない機能ですよね
dataset だと文字列だけでしたが、WeakMap だと data みたいにオブジェクトを持てますし
さらに要素を削除すると保存していたデータも一緒に消してくれる便利仕様

一応IE11もES6とは違いますがWeakMapがあるのでそろそろ data が消えていくのかなと思ってます

投稿2016/03/28 16:01

ryls-nmm

総合スコア633

ベストアンサー

例えば、html自体にデータや状態を持たせたい時に使ったりします！
データを持たせたいとかいまいち意味不明だと思うので例を出しますね！

下にdataを使用した例を書いてみます！

例えば一般的なタブ切り替えのレイアウト、機能を作ってみます。
具体的には3タブの下に、選択しているタブの詳細を表示するブロックがある感じです。（分かりづらかったらすいません）
それをjavascriptを使用して切り替えたいみたいな実装をするとします。

基本となるhtmlコードは

html
1<div class="tabs" id="js-tabs">
2  <div class="tab is_active">タブ1</div>
3  <div class="tab">タブ2</div>
4  <div class="tab">タブ3</div>
5</div>
6<div class="tab-contents" id="js-tabs">
7  <div class="tab-content is_active">タブ1の中身</div>
8  <div class="tab-content">タブ2の中身</div>
9  <div class="tab-content">タブ3の中身</div>
10</div>

みたいな感じですね！
それで、タブ1、タブ1の中身を最初は表示しておきます。
上のhtmlに追加してcssを追加します！

css
1.tab{display:none;}
2.tab.is_active{display:block;}
3.tab-content{display:none;}
4.tab-content.is_active{display:block;}
5/*基本はdisplay noneで消してますが、選択しているタブ、タブの詳細に関してはis_activeを使用して表示する*/
6/*本当はfloatとか色々デザインが必要ですが今回は機能面で使用するcssのみ書いてます！*/
7

次にjavascriptを用いてクリックした時にタブとタブの詳細を切り替える機能を作ります。

この時動作として必要な情報は

タブをクリックした時に、「どのタブ」をクリックしたか

です

このような情報はhtmlのどこに持たせておけばいいのかというと、いろんな方法があります。
例えば、cssのclassにもたせておくというのも一つの方法です。
ただ、classにjavascriptで持たせる情報を書いてしまうと、

デザイン修正のためにclassを変更
↓
あれ？javascript動かなくなった。。。
↓
あ、今変更したclass名をjavascriptが使ってたのかーーー

みたいなことになりかねません。
なので、レイアウトではない情報をclassに持たせるのは極力避けたいです。

なので、できれば情報や状態はdata属性に持たせたほうがいいんです。（他にもやり方は色々ありますが）

なので今回の場合だと、
タブにdata属性を持たせて、タブ詳細にそれぞれのclassを追加します。
（タブ詳細にjs-...というclass名を使用していますが、個人的な命名規則です、js-とすることでこれはjavascriptに使うclassだよーとしています。）

html
1<div class="tabs">
2  <div class="tab is_active" data-tab="tab1">タブ1</div>
3  <div class="tab" data-tab="tab2">タブ2</div>
4  <div class="tab" data-tab="tab3">タブ3</div>
5</div>
6<div class="tab-contents">
7  <div class="tab-content js-tab1-content is_active">タブ1の中身</div>
8  <div class="tab-content js-tab2-content">タブ2の中身</div>
9  <div class="tab-content js-tab3-content">タブ3の中身</div>
10</div>

javascript
1$('.tab').on('click', function(){
2  //$(this)を何回も使うので変数にまとめる
3  var $this = $(this);
4
5  //どのタブ押したか習得、タブ1をクリックするとtab1が取得される
6  var tabType = $this.data('tab');
7
8  //タブを全て非表示にする  
9  $('.tab').removeClass('is_active');
10  //選択したタブだけ表示する
11  $this.addClass('is_active');
12
13  //タブ詳細を全て非表示にする
14  $('.tab-content').removeClass('is_active');
15
16  //選択しているタブのclassを作る（ここ汚いですが）
17  var selectedTabDetail = '.js-' + tabType + '-content';
18  //選択しているタブの詳細を表示にする
19  $(selectedTabDetail).addClass('is_active');
20})

みたいな感じです。

結論として、
data属性を使用するメリットはclassなどのレイアウトを担当する部分を汚染すること無く、情報、状態をhtmlに持たせることが出来ることだと思います。

ちなみに、data属性を使用する場合、
.data('tab')と
.attr('data-tab')
の2つがあるのですが、できれば後者のattrを使用するほうが後々楽になったりバグが発生しなくなります。
data()を使用するとその後にdataを取得しても更新されない等（キャッシュされてしまって更新されない）の不具合？がおきてしまうので！

長くなってしまってすいません！

投稿2016/03/24 00:15

MasakazuFukami

総合スコア1869

aaaaaaaa

2016/03/28 10:30

ご回答有難うございます。提示してくださったソースを再現してみたのですが動作しませんでした。

MasakazuFukami

2016/03/28 13:52

これで動くと思います！ ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://code.jquery.com/jquery-1.12.2.min.js"></script> <style> .tabs{ overflow: hidden; } .tab{ float: left; width: 300px; padding: 10px; border: solid 1px #ccc; } .tab-contants{} .tab-content{ display: none; width: 900px; padding: 20px; border: solid 1px #ccc; } .is_active{display: block;} </style> </head> <body> <div class="tabs"> <div class="tab is_active" data-tab="tab1">タブ1</div> <div class="tab" data-tab="tab2">タブ2</div> <div class="tab" data-tab="tab3">タブ3</div> </div> <div class="tab-contents"> <div class="tab-content js-tab1-content is_active">タブ1の中身</div> <div class="tab-content js-tab2-content">タブ2の中身</div> <div class="tab-content js-tab3-content">タブ3の中身</div> </div> <script> $('.tab').on('click', function(){ //$(this)を何回も使うので変数にまとめる var $this = $(this); //どのタブ押したか習得、タブ1をクリックするとtab1が取得される var tabType = $this.data('tab'); //タブを全て非表示にする $('.tab').removeClass('is_active'); //選択したタブだけ表示する $this.addClass('is_active'); //タブ詳細を全て非表示にする $('.tab-content').removeClass('is_active'); //選択しているタブのclassを作る（ここ汚いですが） var selectedTabDetail = '.js-' + tabType + '-content'; //選択しているタブの詳細を表示にする $(selectedTabDetail).addClass('is_active'); }) </script> </body> </html> ```

aaaaaaaa

2016/03/29 03:12

ご回答有難うございます。無事に動作しました。

行動規範の内容に同意します

変数や連想配列を指定することもできますが、処理で使用したい「文字列」や「数値」をそのまま入れておくのが基本的な使い方だと思います。

html
1<div data-sample="1" data-group="human"> 
2<div data-sample="2" data-group="human">

data-sampleの番号で絞り込んだり、中の数値を利用したり、
data-groupに同じ文字列が入っているもので要素を絞り込んだり、などですね。

投稿2016/03/28 16:09

yamato_hikawa

総合スコア2092

よく使うやつ。これだけでアコーディオンになるのです。

jQuery
1$(selector).on("click", function(){
2    if($(this).data("toggle") === "close"){
3        $(this).data("toggle", "open");
4        $(target).slideDown(500);
5    } else {
6        $(this).data("toggle", "close");
7        $(target.slideUp(500);
8    }
9});