質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.38%

  • JavaScript

    21600questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    8584questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • 関数

    270questions

    関数(ファンクション・メソッド・サブルーチンとも呼ばれる)は、はプログラムのコードの一部であり、ある特定のタスクを処理するように設計されたものです。

data()の用途とは

解決済

回答 4

投稿

  • 評価
  • クリップ 1
  • VIEW 1,885

aaaaaaaa

score 473

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mpyw

    2016/03/23 21:38 編集

    https://w3g.jp/blog/jquery-data-attr-cache
    http://qiita.com/toshiharu-irie/items/e7f803085000c4008f51


    もう使わない方がいい感じですね.datasetですが既にIE10以下の面倒を見る必要性はほとんどなくなってきているので,特殊な状況でないかぎり使ってもいいと思います.

    キャンセル

  • aaaaaaaa

    2016/03/28 18:41

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

    キャンセル

回答 4

checkベストアンサー

+1

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

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

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

基本となるhtmlコードは

<div class="tabs" id="js-tabs">
  <div class="tab is_active">タブ1</div>
  <div class="tab">タブ2</div>
  <div class="tab">タブ3</div>
</div>
<div class="tab-contents" id="js-tabs">
  <div class="tab-content is_active">タブ1の中身</div>
  <div class="tab-content">タブ2の中身</div>
  <div class="tab-content">タブ3の中身</div>
</div>

みたいな感じですね!
それで、タブ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だよーとしています。)

<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>
$('.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を取得しても更新されない等(キャッシュされてしまって更新されない)の不具合?がおきてしまうので!

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/03/28 19:30

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

    キャンセル

  • 2016/03/28 22: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&quot;&gt;&lt;/script&gt;
    <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>
    ```

    キャンセル

  • 2016/03/29 12:12

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

    キャンセル

+1

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

$(selector).on("click", function(){
    if($(this).data("toggle") === "close"){
        $(this).data("toggle", "open");
        $(target).slideDown(500);
    } else {
        $(this).data("toggle", "close");
        $(target.slideUp(500);
    }
});

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.38%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    21600questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    8584questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • 関数

    270questions

    関数(ファンクション・メソッド・サブルーチンとも呼ばれる)は、はプログラムのコードの一部であり、ある特定のタスクを処理するように設計されたものです。