回答編集履歴
15
テキスト修正
answer
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
以下、説明のための具体例です。(何らかのECサイトのようなものを想定しています。）
|
|
11
11
|
|
|
12
12
|
- たとえば、画面仕様の設計上、各ページを（`110` とか `305`だったりの）３桁の数字で
|
|
13
|
-
管理しており、その
|
|
13
|
+
管理しており、その一番左の桁(百の位の数)の意味が以下であるとします。
|
|
14
14
|
|
|
15
15
|
1: 商品関連のページ
|
|
16
16
|
2: 注文関連のページ
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
- すると
|
|
38
38
|
> 「このページにいる時」という条件
|
|
39
39
|
|
|
40
|
-
の分岐として、たとえば今挙げている例で、ページ番号の
|
|
40
|
+
の分岐として、たとえば今挙げている例で、ページ番号の一番左の桁の数ごとに何らかの処理をしたいときは、
|
|
41
41
|
|
|
42
42
|
```javascript
|
|
43
43
|
var pageNumber = $('header > h1').data('page-number');
|
14
テキスト修正
answer
CHANGED
|
@@ -6,7 +6,8 @@
|
|
|
6
6
|
|
|
7
7
|
**「これは ○○ページである」 ということを示す何らかの data 属性を定義する。**
|
|
8
8
|
|
|
9
|
-
ことを考えます。
|
|
9
|
+
ことを考えます。
|
|
10
|
+
以下、説明のための具体例です。(何らかのECサイトのようなものを想定しています。）
|
|
10
11
|
|
|
11
12
|
- たとえば、画面仕様の設計上、各ページを（`110` とか `305`だったりの）３桁の数字で
|
|
12
13
|
管理しており、その1桁目(百の位の数)の意味が以下であるとします。
|
13
テキスト修正
answer
CHANGED
|
@@ -4,9 +4,8 @@
|
|
|
4
4
|
|
|
5
5
|
かどうかは分かりませんが、自分だったら
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
**「これは ○○ページである」 ということを示す何らかの data 属性を定義する。**
|
|
8
8
|
|
|
9
|
-
|
|
10
9
|
ことを考えます。以下、想定する例です。
|
|
11
10
|
|
|
12
11
|
- たとえば、画面仕様の設計上、各ページを（`110` とか `305`だったりの）３桁の数字で
|
12
テキスト修正
answer
CHANGED
|
@@ -18,8 +18,7 @@
|
|
|
18
18
|
|
|
19
19
|
このとき、この３桁のページ番号を値として持つ `data-page-number` という属性を定義します
|
|
20
20
|
|
|
21
|
-
- この属性を、どのページにもサーバーサイドで生成される、
|
|
22
|
-
|
|
21
|
+
- この属性を、どのページにもある （`<head>`ではなく `<header>`のほうの)ヘッダの、何らか
|
|
23
22
|
決まったセレクタで取れる要素の属性として追加します。
|
|
24
23
|
|
|
25
24
|
- たとえば、どのページでも `header > h1` でページタイトルを表示させるので、この `h1` に
|
11
テキスト修正
answer
CHANGED
|
@@ -18,8 +18,9 @@
|
|
|
18
18
|
|
|
19
19
|
このとき、この３桁のページ番号を値として持つ `data-page-number` という属性を定義します
|
|
20
20
|
|
|
21
|
+
- この属性を、どのページにもサーバーサイドで生成される、
|
|
21
|
-
|
|
22
|
+
（ `<head>`ではなく `<header>`のほうの)ヘッダの、何らか
|
|
22
|
-
|
|
23
|
+
決まったセレクタで取れる要素の属性として追加します。
|
|
23
24
|
|
|
24
25
|
- たとえば、どのページでも `header > h1` でページタイトルを表示させるので、この `h1` に
|
|
25
26
|
`data-page-number`
|
10
テキスト修正
answer
CHANGED
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
上記のシナリオで、`data-page-number` という属性名と、３桁の数字というのは
|
|
62
62
|
例えばの話ですので、
|
|
63
63
|
- data属性の名前
|
|
64
|
-
- その値の型と定義 --- 文字列、数値：`'123'`、オブジェクト：`'{ "type": "product", "
|
|
64
|
+
- その値の型と定義 --- 文字列、数値：`'123'`、オブジェクト：`'{ "type": "product", "category": 23 }'`
|
|
65
65
|
- HTMLのどの要素の属性にするか
|
|
66
66
|
|
|
67
67
|
は別途、対象のシステムに合わせて適切に検討しなければなりませんが、
|
9
テキスト修正
answer
CHANGED
|
@@ -64,8 +64,9 @@
|
|
|
64
64
|
- その値の型と定義 --- 文字列、数値：`'123'`、オブジェクト：`'{ "type": "product", "id": 9011 }'`
|
|
65
65
|
- HTMLのどの要素の属性にするか
|
|
66
66
|
|
|
67
|
-
は別途、対象のシステムに合わせて適切に検討しなければなりませんが、
|
|
67
|
+
は別途、対象のシステムに合わせて適切に検討しなければなりませんが、
|
|
68
|
+
JQuery の `data()` メソッドは、上記の例だと HTMLに書かれた
|
|
68
|
-
|
|
69
|
+
`'123'` を数値に変換してくれるように、属性の値からよしなに型変換
|
|
69
|
-
|
|
70
|
+
してくれるので、この用途には便利かなと思います。
|
|
70
71
|
|
|
71
72
|
以上参考になれば幸いです。
|
8
テキスト修正
answer
CHANGED
|
@@ -31,7 +31,8 @@
|
|
|
31
31
|
</header>
|
|
32
32
|
```
|
|
33
33
|
|
|
34
|
-
というような、 `data-page-number` 属性をもつ `h1` が、どのページの `<header>`にも
|
|
34
|
+
というような、 `data-page-number` 属性をもつ `h1` が、どのページの `<header>`にも
|
|
35
|
+
あることになります。
|
|
35
36
|
|
|
36
37
|
- すると
|
|
37
38
|
> 「このページにいる時」という条件
|
|
@@ -63,8 +64,8 @@
|
|
|
63
64
|
- その値の型と定義 --- 文字列、数値：`'123'`、オブジェクト：`'{ "type": "product", "id": 9011 }'`
|
|
64
65
|
- HTMLのどの要素の属性にするか
|
|
65
66
|
|
|
66
|
-
は別途検討しなければなりませんが、JQuery の `data()` メソッドは、
|
|
67
|
+
は別途、対象のシステムに合わせて適切に検討しなければなりませんが、JQuery の `data()` メソッドは、
|
|
67
|
-
HTMLに書かれた`'123'` を数値に変換してくれたりと、属性の値の書き方によって、
|
|
68
|
+
上記の例だと HTMLに書かれた`'123'` を数値に変換してくれたりと、属性の値の書き方によって、
|
|
68
69
|
よしなに型変換してくれるので、この用途には便利かなと思います。
|
|
69
70
|
|
|
70
71
|
以上参考になれば幸いです。
|
7
テキスト修正
answer
CHANGED
|
@@ -9,8 +9,8 @@
|
|
|
9
9
|
|
|
10
10
|
ことを考えます。以下、想定する例です。
|
|
11
11
|
|
|
12
|
-
- たとえば、画面仕様の設計上、各ページを（`110` とか `305`だったりの）３桁の数字で
|
|
12
|
+
- たとえば、画面仕様の設計上、各ページを（`110` とか `305`だったりの）３桁の数字で
|
|
13
|
-
その1桁目(百の位の数)の意味が以下であるとします。
|
|
13
|
+
管理しており、その1桁目(百の位の数)の意味が以下であるとします。
|
|
14
14
|
|
|
15
15
|
1: 商品関連のページ
|
|
16
16
|
2: 注文関連のページ
|
6
テキスト修正
answer
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
|
|
10
10
|
ことを考えます。以下、想定する例です。
|
|
11
11
|
|
|
12
|
-
- たとえば、各ページを（`110` とか `305`だったりの）３桁の数字で管理しており、
|
|
12
|
+
- たとえば、画面仕様の設計上、各ページを（`110` とか `305`だったりの）３桁の数字で管理しており、
|
|
13
13
|
その1桁目(百の位の数)の意味が以下であるとします。
|
|
14
14
|
|
|
15
15
|
1: 商品関連のページ
|
5
テキスト修正
answer
CHANGED
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
- この属性を、どのページにも生成される、（ `<head>`ではなく `<header>`のほうの)ヘッダの
|
|
22
22
|
何らかの決まったセレクタで取れる要素の属性として追加します。
|
|
23
23
|
|
|
24
|
-
- たとえば、どのページ
|
|
24
|
+
- たとえば、どのページでも `header > h1` でページタイトルを表示させるので、この `h1` に
|
|
25
25
|
`data-page-number`
|
|
26
26
|
をつけることにすると
|
|
27
27
|
|
4
テキスト修正
answer
CHANGED
|
@@ -9,11 +9,12 @@
|
|
|
9
9
|
|
|
10
10
|
ことを考えます。以下、想定する例です。
|
|
11
11
|
|
|
12
|
-
- たとえば、ページを３桁の数字で管理しており、
|
|
12
|
+
- たとえば、各ページを（`110` とか `305`だったりの）３桁の数字で管理しており、
|
|
13
|
+
その1桁目(百の位の数)の意味が以下であるとします。
|
|
13
14
|
|
|
14
|
-
|
|
15
|
+
1: 商品関連のページ
|
|
15
|
-
|
|
16
|
+
2: 注文関連のページ
|
|
16
|
-
|
|
17
|
+
3: 顧客関連のページ
|
|
17
18
|
|
|
18
19
|
このとき、この３桁のページ番号を値として持つ `data-page-number` という属性を定義します
|
|
19
20
|
|
|
@@ -56,10 +57,14 @@
|
|
|
56
57
|
と書けます。
|
|
57
58
|
|
|
58
59
|
|
|
59
|
-
上記のシナリオで、`data-page-number` という属性名と、３桁の数字というのは
|
|
60
|
+
上記のシナリオで、`data-page-number` という属性名と、３桁の数字というのは
|
|
60
|
-
例えばの話ですので、
|
|
61
|
+
例えばの話ですので、
|
|
62
|
+
- data属性の名前
|
|
61
|
-
|
|
63
|
+
- その値の型と定義 --- 文字列、数値：`'123'`、オブジェクト：`'{ "type": "product", "id": 9011 }'`
|
|
62
|
-
数値に変換してくれたりと、属性の値の書き方によって、よしなに型変換してくれるので、
|
|
63
|
-
|
|
64
|
+
- HTMLのどの要素の属性にするか
|
|
64
65
|
|
|
66
|
+
は別途検討しなければなりませんが、JQuery の `data()` メソッドは、上記の例だと
|
|
67
|
+
HTMLに書かれた`'123'` を数値に変換してくれたりと、属性の値の書き方によって、
|
|
68
|
+
よしなに型変換してくれるので、この用途には便利かなと思います。
|
|
69
|
+
|
|
65
70
|
以上参考になれば幸いです。
|
3
テキスト修正
answer
CHANGED
|
File without changes
|
2
テキスト修正
answer
CHANGED
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
</header>
|
|
31
31
|
```
|
|
32
32
|
|
|
33
|
-
というような、 `data-page-number` 属性をもつ `h1` が、どのページにもあることになります。
|
|
33
|
+
というような、 `data-page-number` 属性をもつ `h1` が、どのページの `<header>`にもあることになります。
|
|
34
34
|
|
|
35
35
|
- すると
|
|
36
36
|
> 「このページにいる時」という条件
|
1
テキスト修正
answer
CHANGED
|
@@ -10,18 +10,19 @@
|
|
|
10
10
|
ことを考えます。以下、想定する例です。
|
|
11
11
|
|
|
12
12
|
- たとえば、ページを３桁の数字で管理しており、その1桁目の意味が以下であるとします。
|
|
13
|
+
|
|
13
14
|
1: 商品関連のページ
|
|
14
15
|
2: 注文関連のページ
|
|
15
16
|
3: 顧客関連のページ
|
|
16
17
|
|
|
17
|
-
このとき、この３桁のページ番号を
|
|
18
|
+
このとき、この３桁のページ番号を値として持つ `data-page-number` という属性を定義します
|
|
18
19
|
|
|
19
|
-
- この属性を、どのページにも生成される、（ <head>ではなく <header>のほうの)ヘッダの
|
|
20
|
+
- この属性を、どのページにも生成される、（ `<head>`ではなく `<header>`のほうの)ヘッダの
|
|
20
21
|
何らかの決まったセレクタで取れる要素の属性として追加します。
|
|
21
22
|
|
|
22
|
-
- たとえば `header > h1` でページタイトルを表示させるので、この `h1` に
|
|
23
|
+
- たとえば、どのページにも `header > h1` でページタイトルを表示させるので、この `h1` に
|
|
23
24
|
`data-page-number`
|
|
24
|
-
をつけるとすると
|
|
25
|
+
をつけることにすると
|
|
25
26
|
|
|
26
27
|
```HTML
|
|
27
28
|
<header>
|
|
@@ -34,7 +35,7 @@
|
|
|
34
35
|
- すると
|
|
35
36
|
> 「このページにいる時」という条件
|
|
36
37
|
|
|
37
|
-
の分岐として、たとえば今挙げている例
|
|
38
|
+
の分岐として、たとえば今挙げている例で、ページ番号の1桁目ごとに何らかの処理をしたいときは、
|
|
38
39
|
|
|
39
40
|
```javascript
|
|
40
41
|
var pageNumber = $('header > h1').data('page-number');
|