質問: html要素にデータ(プロパティ名と値)、objectオブジェクト(連想配列)を指定できるjqueryのdataメソッドについて質問です。 html要素に変数や連想配列を指定できるということにピンとこないのですが、html要素に変数や連想配列を指定することでどのような長所や利用方法がありますか。 下記のページ以外での利用方法や長所が知りたいです。 http://www.jquerystudy.info/reference/data/data.html
回答: 例えば、html自体にデータや状態を持たせたい時に使ったりします! データを持たせたいとかいまいち意味不明だと思うので例を出しますね! 下にdataを使用した例を書いてみます! 例えば一般的なタブ切り替えのレイアウト、機能を作ってみます。 具体的には3タブの下に、選択しているタブの詳細を表示するブロックがある感じです。(分かりづらかったらすいません) それをjavascriptを使用して切り替えたいみたいな実装をするとします。 基本となるhtmlコードは ``` タブ1 タブ2 タブ3 タブ1の中身 タブ2の中身 タブ3の中身 ``` みたいな感じですね! それで、タブ1、タブ1の中身を最初は表示しておきます。 上のhtmlに追加してcssを追加します! ``` .tab{display:none;} .tab.is_active{display:block;} .tab-content{display:none;} .tab-content.is_active{display:block;} /*基本はdisplay noneで消してますが、選択しているタブ、タブの詳細に関してはis_activeを使用して表示する*/ /*本当はfloatとか色々デザインが必要ですが今回は機能面で使用するcssのみ書いてます!*/ ``` 次にjavascriptを用いてクリックした時にタブとタブの詳細を切り替える機能を作ります。 この時動作として必要な情報は * タブをクリックした時に、「どのタブ」をクリックしたか です このような情報はhtmlのどこに持たせておけばいいのかというと、いろんな方法があります。 例えば、cssのclassにもたせておくというのも一つの方法です。 ただ、classにjavascriptで持たせる情報を書いてしまうと、 ``` デザイン修正のためにclassを変更 ↓ あれ?javascript動かなくなった。。。 ↓ あ、今変更したclass名をjavascriptが使ってたのかーーー ``` みたいなことになりかねません。 なので、レイアウトではない情報をclassに持たせるのは極力避けたいです。 なので、できれば情報や状態はdata属性に持たせたほうがいいんです。(他にもやり方は色々ありますが) なので今回の場合だと、 タブにdata属性を持たせて、タブ詳細にそれぞれのclassを追加します。 (タブ詳細にjs-...というclass名を使用していますが、個人的な命名規則です、js-とすることでこれはjavascriptに使うclassだよーとしています。) ``` タブ1 タブ2 タブ3 タブ1の中身 タブ2の中身 タブ3の中身 ``` ``` $('.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'); }) ``` みたいな感じです。 結論として、 data属性を使用するメリットはclassなどのレイアウトを担当する部分を汚染すること無く、情報、状態をhtmlに持たせることが出来ることだと思います。 ちなみに、data属性を使用する場合、 .data('tab')と .attr('data-tab') の2つがあるのですが、できれば後者のattrを使用するほうが後々楽になったりバグが発生しなくなります。 data()を使用するとその後にdataを取得しても更新されない等(キャッシュされてしまって更新されない)の不具合?がおきてしまうので! 長くなってしまってすいません!