備忘録　data属性で簡単コーディング

こんにちは。Maromaroのtakaです。
徐々にjavascriptを理解していく中で、
とても有用なdata属性なるものを見つけたので備忘録として記事にしました。

data属性とは

HTML要素でよく「class」や「id」などの属性がありますが、
次に記述する「data」属性もあります。

<div data-name=”test”> </div>
※nameの部分は任意の値で大丈夫です。

このように　「data-任意の変数名= “任意の値”」　と記述すれば、
name にtestという値を代入することができます。
data属性は変数のように扱うことができます。

dataの取り出し方

dataに代入した値はJavaScriptやjQueryを使用し取り出すことができます。
JavaScriptのみの記述は効率が悪いので、jQueryを使用しましょう。
例えば

<div id=”hoge” data-name=”test”></div>

上記から取り出すためには、

$('div#hoge').data('name');
とすることでidがhogeのdivから「name」に代入されている「test」を
取り出すことができます。
他には
 
$('div#hoge').click(function(){ 
target = $(this).data('name');});
 
このようにthisを使うことで指定した要素をクリック時に
指定した要素のdata値を取得することができます。
thisはよく使いますし、非常に便利なので覚えておきましょう！
 
取り出したdataの活用方法
例えば下記のボタン３つですが、
この記述ですとどのボタンを押しても同じtest01のアラートが出ます。
See the Pen  gOpZQJz by 佐々木 貴徳 (@whxwrxyj) on CodePen.
同じような要素のボタンで別々の結果を取り出したい場合が多々あると思います。
下記は同じCSSを使ったボタンから別々の結果を取り出します。
See the Pen  BaNvvzv by 佐々木 貴徳 (@whxwrxyj) on CodePen.
同じ要素のボタンから別々のアラートを出しています。
上記のように「this」を使用し、if文が簡単に書けるようになります。
「data」と「this」を覚えればより一層楽に分かりやすくコーディングが出来ますので、
覚えておいて損はないかもしれません。
Web制作
HTML・CSS
JavaScript
jQuery