【jQuery】data関数について

最近モーダルなどのコーディングをする際にHTML5のdata関数なるものを使ったんですがこれがまたお便利だったので書いておきます。

data関数とは
html5で追加されたdata関数とは主にjQueryなどで値を取得したり変更したりできる属性のことです

<a href="#" class="js-close-btn" data-target=".target-modal">

このようにdata-〇〇とし、対象となる要素のクラス名やidを入れます。
そしてjQueryで値を取得し変数に代入する際は

$('.js-close-btn').click(function (e) {
   var target = $(this).data('target');
});

このような記述になります。

data属性のメリットは
もし仮にdataを使わずクラス名でjQueryで値を取得したり変更する時に
後々、スタイルの当て方を変更する為、クラス名も変更しなければならない場合、HTMLファイル、jsファイルの2つに変更をくわえなければなりません。
このように本来クラスはスタイルを当てる際に必要なものでデータを格納すべきものではありません。
ですがdata属性を使えば適切な値の取り出し方が出来、実装者の評価にも繋がると思っています。

まあ、最近知ったから偉そうなことは言えないけどこれからは使って行こうねって話でしたw