こんにちは。
一番適した書き方
かどうかは分かりませんが、自分だったら
「これは ○○ページである」 ということを示す何らかの data 属性を定義する。
ことを考えます。
以下、説明のための具体例です。(何らかのECサイトのようなものを想定しています。)
- たとえば、画面仕様の設計上、各ページを(
110
とか 305
だったりの)3桁の数字で
管理しており、その一番左の桁(百の位の数)の意味が以下であるとします。
1: 商品関連のページ
2: 注文関連のページ
3: 顧客関連のページ
このとき、この3桁のページ番号を値として持つ data-page-number
という属性を定義します
- この属性を、どのページにもある (
<head>
ではなく <header>
のほうの)ヘッダの、何らか
決まったセレクタで取れる要素の属性として追加します。
- たとえば、どのページでも
header > h1
でページタイトルを表示させるので、この h1
に
data-page-number
をつけることにすると
HTML
1<header>
2 <h1 data-page-number='123'>商品詳細</h1>
3</header>
というような、 data-page-number
属性をもつ h1
が、どのページの <header>
にも
あることになります。
「このページにいる時」という条件
の分岐として、たとえば今挙げている例で、ページ番号の一番左の桁の数ごとに何らかの処理をしたいときは、
javascript
1var pageNumber = $('header > h1').data('page-number');
2
3switch(pageNumber / 100) {
4 case 1:
5 // 商品関連のページの場合の処理をここに書く。
6 break;
7 case 2:
8 // 注文関連のページの場合の処理をここに書く。
9 break;
10 case 3:
11 // 顧客関連のページの場合の処理をここに書く。
12 break;
13}
14
と書けます。
上記のシナリオで、data-page-number
という属性名と、3桁の数字というのは
例えばの話ですので、
- data属性の名前
- その値の型と定義 --- 文字列、数値:
'123'
、オブジェクト:'{ "type": "product", "category": 23 }'
- HTMLのどの要素の属性にするか
は別途、対象のシステムに合わせて適切に検討しなければなりませんが、
JQuery の data()
メソッドは、上記の例だと HTMLに書かれた
'123'
を数値に変換してくれるように、属性の値からよしなに型変換
してくれるので、この用途には便利かなと思います。
以上参考になれば幸いです。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/03/02 07:16