40
33

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

HTML5のdata属性の名前をRailsのViewで付ける時と、jQueryからアクセスする時の注意

Last updated at Posted at 2015-05-26

HTML5のdata-* 属性名は XML-compatibleかつ先頭3文字が「xml」でない文字で書かないといけません。

XML-compatibleとは

先頭が英文字または、「_(アンダースコア)」 で始まり2文字目移行が「-(ハイフン)」「.(ピリオド)」 を含む英数字。
( 「.(ピリオド)」 は使わないほうがよいらしい)

RailsのViewで書く時の注意

Viewで要素のデータ属性を下のように書くときがある。
RubyのSymbolでは「-(ハイフン)」を使えないので以下の様には書けない。

間違い
= link_to 'リンク', '/', data: {hoge-hoge: 'hogehoge'}, class: 'hoge'

以下の様に書かないと文法エラーとなる。

正解
= link_to 'リンク', '/', data: {hoge_hoge: 'hogehoge'}, class: 'hoge'

これはHTMLに変換されたとき、以下の様に「-(ハイフン)」に変わっている。

<a data-hoge-hoge="hogehoge" class="hoge" href="/">リンク</a>

なので、jQueryからdataメソッドでアクセスするときは、以下のようにする。

$('a.hoge').data('hoge-hoge');
40
33
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
40
33

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?