teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

26

テキスト修正

2018/02/12 04:56

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -123,4 +123,4 @@
123
123
  ```javascript
124
124
  ["autum"] == "autum"
125
125
  ```
126
- とが違う結果を返すことが理解できます。
126
+ とが違う結果を返すことが確認できます。

25

テキスト修正

2018/02/12 04:56

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -88,8 +88,7 @@
88
88
 
89
89
  - `"caption": "カフェ、秋"` のデータは表示されない。
90
90
 
91
- という結果になります。
91
+ という結果になります。望ましいのは、上記の3つとも表示されてほしいわけですが、
92
-
93
92
  以下、このような結果になる理由を説明します。
94
93
 
95
94
  まず、

24

テキスト修正

2018/02/12 04:53

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -89,8 +89,9 @@
89
89
  - `"caption": "カフェ、秋"` のデータは表示されない。
90
90
 
91
91
  という結果になります。
92
- このような結果になる理由を説明します。
93
92
 
93
+ 以下、このような結果になる理由を説明します。
94
+
94
95
  まず、
95
96
  - `"caption": "紅葉"` と `"caption": "紅葉2"` は表示される
96
97
 

23

テキスト修正

2018/02/12 04:31

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -114,7 +114,7 @@
114
114
  上記の左辺は、やはり比較の前に文字列に変換されますが、左辺が文字列になると
115
115
  `"cafe,autum"` に変換され、右辺とは異なる文字列なので `==` は`false`を返します。
116
116
 
117
- 上記とおり、 `===` を `==` としてみることで、
117
+ ように `===` を `==` に変えてみることで、
118
118
 
119
119
  ```javascript
120
120
  ["autum"] === "autum"

22

テキスト修正

2018/02/12 02:45

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -94,7 +94,7 @@
94
94
  まず、
95
95
  - `"caption": "紅葉"` と `"caption": "紅葉2"` は表示される
96
96
 
97
- 理由は、以下の判定が `true`になるからです。
97
+ 理由は、以下の判定が `true`**になる**からです。
98
98
 
99
99
  ```javascript
100
100
  ["autum"] == "autum"

21

テキスト修正

2018/02/12 02:39

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -51,27 +51,76 @@
51
51
  ```javascript
52
52
  n.category == cate
53
53
  ```
54
- として、ご質問のコードを実行して tokyoとautumのラジオボタンをクリックしてみると、
54
+ として、ご質問のコードを実行して autum のラジオボタンをクリックしてみると、
55
+ API から返された
56
+ ```json
57
+ [
58
+ {
55
- "カフェ 、秋" autumボタンをクリックしても表示されないことを除けば、
59
+   "category": ["cafe", "autum"],
60
+   "caption": "カフェ、秋",
61
+   "url": "http://jsrun.it/assets/3/o/C/A/3oCAy.jpg"
62
+ },
63
+ {
64
+   "category": ["autum"],
56
- 該当するものが表示されます。
65
+   "caption": "紅葉",
66
+   "url": "http://jsrun.it/assets/y/c/W/i/ycWii.jpg"
67
+ },
68
+ {
69
+   "category": ["tokyo"],
70
+   "caption": "東京駅",
71
+   "url": "http://jsrun.it/assets/n/O/V/x/nOVx2.jpg"
72
+ },
73
+ {
74
+   "category": ["autum"],
75
+   "caption": "紅葉2",
76
+   "url": "http://jsrun.it/assets/h/I/X/B/hIXBO.jpg"
77
+ },
78
+ {
79
+   "category": ["tokyo"],
80
+   "caption": "東京タワー",
81
+   "url": "http://jsrun.it/assets/j/S/t/n/jStnu.jpg"
82
+ }
83
+ ]
84
+ ```
85
+ のうち、
57
86
 
58
- これはなぜかいえば、以下の式が `true` **にな**からです。
87
+ - `"caption": "紅葉"` と `"caption": "紅葉2"` は表示されが、
59
88
 
89
+ - `"caption": "カフェ、秋"` のデータは表示されない。
90
+
91
+ という結果になります。
92
+ このような結果になる理由を説明します。
93
+
94
+ まず、
95
+ - `"caption": "紅葉"` と `"caption": "紅葉2"` は表示される
96
+
97
+ 理由は、以下の判定が `true`になるからです。
98
+
60
99
  ```javascript
61
- ["tokyo"] == "tokyo"
100
+ ["autum"] == "autum"
62
101
  ```
102
+
103
+ 上記で、左辺の `["autum"]` は、 `==` の右辺が文字列なので、
104
+ 比較される前に文字列に変換されて、`"autum"`となるので、
105
+ `==` の結果が true になります。
106
+
107
+ 次に、
108
+ - `"caption": "カフェ、秋"` のデータは表示されない。
109
+
110
+ のは何故かといえば、以下が `true` には**ならない**からです。
63
111
  ```javascript
64
- ["autum"] == "autum"
112
+ ["cafe", "autum"] == "autum"
65
113
  ```
114
+ 上記の左辺は、やはり比較の前に文字列に変換されますが、左辺が文字列になると
115
+ `"cafe,autum"` に変換され、右辺とは異なる文字列なので `==` は`false`を返します。
66
116
 
67
- 上記で、左辺の `["tokyo"]` や `["autum"]` は、 `==` の右辺が文字列なので、
68
- 比較される前に文字列に変換されますが、 それぞれ、`"tokyo"`、 `"autum"`に変換
69
- される、 `==` の結果は true になります。
117
+ 上記とおり、 `===` `==` としてみることで、
70
118
 
71
- しかし、cafeのボタンをクリックしたときは意図したようには表示されません。
72
- それは、以下が `true` には**ならない**からです。
73
119
  ```javascript
74
- ["cafe", "autum"] == "cafe"
120
+ ["autum"] === "autum"
75
121
  ```
122
+ と、
76
- 上記の左辺は、やはり比較の前に文字列に変換されますが、左辺が文字列になると
123
+ ```javascript
77
- `"cafe,autum"` に変換され、右辺とは異なる文字列なので `==` は`false`を返します。
124
+ ["autum"] == "autum"
125
+ ```
126
+ とが違う結果を返すことが理解できます。

20

テキスト修正

2018/02/12 02:35

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -29,8 +29,9 @@
29
29
  ```
30
30
 
31
31
   
32
- 参考までに、ご提示のコードを jsFiddle に写し、上記の修正をしたものが以下です。(※画像はありません)
32
+ 参考までに、ご提示のコードを jsFiddle に写し、上記の修正をしたものが以下です。
33
-
33
+ (※画像はありません)
34
+  
34
35
  [http://jsfiddle.net/jun68ykt/8fm81f8z/4/](http://jsfiddle.net/jun68ykt/8fm81f8z/4/)
35
36
 
36
37
  ---
@@ -50,7 +51,7 @@
50
51
  ```javascript
51
52
  n.category == cate
52
53
  ```
53
- として、ご質問のコードを実行すると、tokyoとautumのラジオボタンをクリックしきに
54
+ として、ご質問のコードを実行して tokyoとautumのラジオボタンをクリックしてみると、
54
55
  "カフェ 、秋" が autumボタンをクリックしても表示されないことを除けば、
55
56
  該当するものが表示されます。
56
57
 

19

テキスト修正

2018/02/11 05:13

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -1,7 +1,7 @@
1
1
  こんにちは。
2
2
   
3
3
  フィルタリングされた配列を作るところで、`$.grep` を使っていますが、
4
- これに渡す関数が返す boolean の式を、以下のように修正するとよいでしょう。
4
+ これに渡す関数が返す真偽値(の式を、以下のように修正するとよいでしょう。
5
5
 
6
6
  **修正前:**
7
7
  ```javascript

18

テキスト修正

2018/02/11 02:47

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -72,6 +72,5 @@
72
72
  ```javascript
73
73
  ["cafe", "autum"] == "cafe"
74
74
  ```
75
- 上記の左辺は、やはり比較の前に文字列に変換されますが、
75
+ 上記の左辺は、やはり比較の前に文字列に変換されますが、左辺が文字列になると
76
- 上記の左辺が文字列になると、`"cafe,autum"`という文字列に
77
- 変換され、右辺とは異なる文字列なので`false`を返します。
76
+ `"cafe,autum"` に変換され、右辺とは異なる文字列なので `==` は`false`を返します。

17

テキスト修正

2018/02/11 02:42

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -1,8 +1,7 @@
1
1
  こんにちは。
2
2
   
3
3
  フィルタリングされた配列を作るところで、`$.grep` を使っていますが、
4
- これに渡す関数が`return` boolean の式を、以下のように
4
+ これに渡す関数がす boolean の式を、以下のように修正するとよいでしょう。
5
- 修正するとよいでしょう。
6
5
 
7
6
  **修正前:**
8
7
  ```javascript

16

テキスト修正

2018/02/11 02:40

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -1,8 +1,8 @@
1
1
  こんにちは。
2
2
   
3
- ご質問のコードの中で、フィルタリングされた配列を作るところで、
3
+ フィルタリングされた配列を作るところで、`$.grep` を使っていますが、
4
- `$.grep` に渡す関数が`return` する boolean の式を
4
+ これに渡す関数が`return` する boolean の式を、以下のように
5
- 以下のように修正するとよいでしょう。
5
+ 修正するとよいでしょう。
6
6
 
7
7
  **修正前:**
8
8
  ```javascript

15

テキスト修正

2018/02/11 02:39

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -55,7 +55,7 @@
55
55
  "カフェ 、秋" が autumボタンをクリックしても表示されないことを除けば、
56
56
  該当するものが表示されます。
57
57
 
58
- これはなぜかといえば、以下の式が `true` になるからです。
58
+ これはなぜかといえば、以下の式が `true` **になる**からです。
59
59
 
60
60
  ```javascript
61
61
  ["tokyo"] == "tokyo"

14

テキスト修正

2018/02/11 02:33

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -30,7 +30,7 @@
30
30
  ```
31
31
 
32
32
   
33
- 参考までに、ご提示のコードを jsFiddle に写し、上記の修正をしたものが以下です。
33
+ 参考までに、ご提示のコードを jsFiddle に写し、上記の修正をしたものが以下です。(※画像はありません)
34
34
 
35
35
  [http://jsfiddle.net/jun68ykt/8fm81f8z/4/](http://jsfiddle.net/jun68ykt/8fm81f8z/4/)
36
36
 

13

テキスト修正

2018/02/11 02:32

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -1,7 +1,8 @@
1
1
  こんにちは。
2
2
   
3
- ご質問のコードの中で、フィルタリングされた配列を作るところの `$.grep` に渡す関数が
3
+ ご質問のコードの中で、フィルタリングされた配列を作るところで、
4
+ `$.grep` に渡す関数が`return` する boolean の式を
4
- `return` する boolean の式を以下のように修正するとよいでしょう。
5
+ 以下のように修正するとよいでしょう。
5
6
 
6
7
  **修正前:**
7
8
  ```javascript

12

テキスト修正

2018/02/11 02:28

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -50,8 +50,8 @@
50
50
  ```javascript
51
51
  n.category == cate
52
52
  ```
53
- として、ご質問のコードを実行すると、tokyoとautumのラジオボタンをクリックしたとき
53
+ として、ご質問のコードを実行すると、tokyoとautumのラジオボタンをクリックしたとき
54
- "カフェ 、秋" が autum をクリックしたときに表示されないことを除けば、
54
+ "カフェ 、秋" が autumボタンをクリックしても表示されないことを除けば、
55
55
  該当するものが表示されます。
56
56
 
57
57
  これはなぜかといえば、以下の式が `true` になるからです。

11

テキスト修正

2018/02/11 02:22

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -50,8 +50,9 @@
50
50
  ```javascript
51
51
  n.category == cate
52
52
  ```
53
- として、ご質問のコードを実行すると、tokyoとautumのラジオボタンをクリックしたときは
53
+ として、ご質問のコードを実行すると、tokyoとautumのラジオボタンをクリックしたときは
54
+ "カフェ 、秋" が autum をクリックしたときに表示されないことを除けば、
54
- 意図通りに表示されます。
55
+ 該当するものが表示されます。
55
56
 
56
57
  これはなぜかといえば、以下の式が `true` になるからです。
57
58
 

10

テキスト修正

2018/02/11 02:19

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -36,7 +36,7 @@
36
36
  ---
37
37
  **追記**
38
38
 
39
- ご質問の本題とはややそれますが、以下補足です。
39
+ 以下補足です。
40
40
 
41
41
  修正前の `return` で返される式
42
42
  ```javascript

9

テキスト修正

2018/02/11 02:17

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -31,4 +31,46 @@
31
31
   
32
32
  参考までに、ご提示のコードを jsFiddle に写し、上記の修正をしたものが以下です。
33
33
 
34
- [http://jsfiddle.net/jun68ykt/8fm81f8z/4/](http://jsfiddle.net/jun68ykt/8fm81f8z/4/)
34
+ [http://jsfiddle.net/jun68ykt/8fm81f8z/4/](http://jsfiddle.net/jun68ykt/8fm81f8z/4/)
35
+
36
+ ---
37
+ **追記**
38
+
39
+ ご質問の本題とはややそれますが、以下補足です。
40
+
41
+ 修正前の `return` で返される式
42
+ ```javascript
43
+ n.category === cate
44
+ ```
45
+ が `true` になることはありません。
46
+ なぜなら、`===` が `true` になるためには、両辺の型が同じであることが必要ですが、
47
+ `n.category` は配列(Array)で、 `cate` は文字列(String)だからです。
48
+
49
+ ここで試しに、 `=` をひとつ減らした
50
+ ```javascript
51
+ n.category == cate
52
+ ```
53
+ として、ご質問のコードを実行すると、tokyoとautumのラジオボタンをクリックしたときは
54
+ 意図通りに表示されます。
55
+
56
+ これはなぜかといえば、以下の式が `true` になるからです。
57
+
58
+ ```javascript
59
+ ["tokyo"] == "tokyo"
60
+ ```
61
+ ```javascript
62
+ ["autum"] == "autum"
63
+ ```
64
+
65
+ 上記で、左辺の `["tokyo"]` や `["autum"]` は、 `==` の右辺が文字列なので、
66
+ 比較される前に文字列に変換されますが、 それぞれ、`"tokyo"`、 `"autum"`に変換
67
+ されるので、 `==` の結果は true になります。
68
+
69
+ しかし、cafeのボタンをクリックしたときは意図したようには表示されません。
70
+ それは、以下が `true` には**ならない**からです。
71
+ ```javascript
72
+ ["cafe", "autum"] == "cafe"
73
+ ```
74
+ 上記の左辺は、やはり比較の前に文字列に変換されますが、
75
+ 上記の左辺が文字列になると、`"cafe,autum"`という文字列に
76
+ 変換され、右辺とは異なる文字列なので、`false`を返します。

8

テキスト修正

2018/02/11 02:11

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -1,6 +1,7 @@
1
1
  こんにちは。
2
2
   
3
- ご質問のコードの中で、フィルタリングされた配列を作るところ
3
+ ご質問のコードの中で、フィルタリングされた配列を作るところの `$.grep` に渡す関数が
4
+ `return` する boolean の式を以下のように修正するとよいでしょう。
4
5
 
5
6
  **修正前:**
6
7
  ```javascript
@@ -9,7 +10,7 @@
9
10
  });
10
11
  ```
11
12
 
12
- の `return` で返す boolean の式を、[indexOf](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf)を使って以下のように修正するといかがでしょうか?
13
+ これを、[indexOf](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf)を使って
13
14
 
14
15
  **修正後:**
15
16
  ```javascript
@@ -17,7 +18,7 @@
17
18
  return n.category.indexOf(cate) >= 0;
18
19
  });
19
20
  ```
20
- あるいは、[includes](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)を使って、以下のようにします。
21
+ とするか、あるいは、[includes](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)を使って、以下のようにします。
21
22
 
22
23
  **修正後:**
23
24
  ```javascript

7

テキスト修正

2018/02/11 01:34

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -2,6 +2,7 @@
2
2
   
3
3
  ご質問のコードの中で、フィルタリングされた配列を作るところ
4
4
 
5
+ **修正前:**
5
6
  ```javascript
6
7
  filterdata = $.grep(alldata,function(n){
7
8
  return n.category === cate;
@@ -10,12 +11,15 @@
10
11
 
11
12
  の `return` で返す boolean の式を、[indexOf](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf)を使って以下のように修正するといかがでしょうか?
12
13
 
14
+ **修正後:**
13
15
  ```javascript
14
16
  filterdata = $.grep(alldata,function(n){
15
17
  return n.category.indexOf(cate) >= 0;
16
18
  });
17
19
  ```
18
20
  あるいは、[includes](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)を使って、以下のようにします。
21
+
22
+ **修正後:**
19
23
  ```javascript
20
24
  filterdata = $.grep(alldata,function(n){
21
25
  return n.category.includes(cate);
@@ -23,6 +27,7 @@
23
27
 
24
28
  ```
25
29
 
30
+  
26
31
  参考までに、ご提示のコードを jsFiddle に写し、上記の修正をしたものが以下です。
27
32
 
28
33
  [http://jsfiddle.net/jun68ykt/8fm81f8z/4/](http://jsfiddle.net/jun68ykt/8fm81f8z/4/)

6

テキスト修正

2018/02/11 01:31

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -15,12 +15,14 @@
15
15
  return n.category.indexOf(cate) >= 0;
16
16
  });
17
17
  ```
18
+ あるいは、[includes](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)を使って、以下のようにします。
19
+ ```javascript
20
+ filterdata = $.grep(alldata,function(n){
21
+ return n.category.includes(cate);
22
+ });
23
+
24
+ ```
25
+
18
26
  参考までに、ご提示のコードを jsFiddle に写し、上記の修正をしたものが以下です。
19
27
 
20
- [http://jsfiddle.net/jun68ykt/8fm81f8z/3/](http://jsfiddle.net/jun68ykt/8fm81f8z/3/)
28
+ [http://jsfiddle.net/jun68ykt/8fm81f8z/4/](http://jsfiddle.net/jun68ykt/8fm81f8z/4/)
21
-
22
-  
23
- あるいは、[includes](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)を使って、以下のほうがより良いコードかもしれません。
24
- ```javascript
25
- return n.category.includes(cate);
26
- ```

5

テキスト修正

2018/02/11 01:22

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -17,7 +17,7 @@
17
17
  ```
18
18
  参考までに、ご提示のコードを jsFiddle に写し、上記の修正をしたものが以下です。
19
19
 
20
- [http://jsfiddle.net/jun68ykt/8fm81f8z/2/](http://jsfiddle.net/jun68ykt/8fm81f8z/2/)
20
+ [http://jsfiddle.net/jun68ykt/8fm81f8z/3/](http://jsfiddle.net/jun68ykt/8fm81f8z/3/)
21
21
 
22
22
   
23
23
  あるいは、[includes](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)を使って、以下のほうがより良いコードかもしれません。

4

テキスト修正

2018/02/11 01:19

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -15,11 +15,11 @@
15
15
  return n.category.indexOf(cate) >= 0;
16
16
  });
17
17
  ```
18
-  
19
18
  参考までに、ご提示のコードを jsFiddle に写し、上記の修正をしたものが以下です。
20
19
 
21
20
  [http://jsfiddle.net/jun68ykt/8fm81f8z/2/](http://jsfiddle.net/jun68ykt/8fm81f8z/2/)
22
21
 
22
+  
23
23
  あるいは、[includes](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)を使って、以下のほうがより良いコードかもしれません。
24
24
  ```javascript
25
25
  return n.category.includes(cate);

3

テキスト修正

2018/02/11 01:12

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -8,7 +8,7 @@
8
8
  });
9
9
  ```
10
10
 
11
- の `return` で返す boolean の式を、以下のように修正するといかがでしょうか?
11
+ の `return` で返す boolean の式を、[indexOf](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf)を使って以下のように修正するといかがでしょうか?
12
12
 
13
13
  ```javascript
14
14
  filterdata = $.grep(alldata,function(n){

2

テキスト修正

2018/02/11 01:11

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -18,4 +18,9 @@
18
18
   
19
19
  参考までに、ご提示のコードを jsFiddle に写し、上記の修正をしたものが以下です。
20
20
 
21
- [http://jsfiddle.net/jun68ykt/8fm81f8z/2/](http://jsfiddle.net/jun68ykt/8fm81f8z/2/)
21
+ [http://jsfiddle.net/jun68ykt/8fm81f8z/2/](http://jsfiddle.net/jun68ykt/8fm81f8z/2/)
22
+
23
+ あるいは、[includes](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)を使って、以下のほうがより良いコードかもしれません。
24
+ ```javascript
25
+ return n.category.includes(cate);
26
+ ```

1

テキスト修正

2018/02/11 01:10

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -3,15 +3,19 @@
3
3
  ご質問のコードの中で、フィルタリングされた配列を作るところ
4
4
 
5
5
  ```javascript
6
- filterdata=$.grep(alldata,function(n){
6
+ filterdata = $.grep(alldata,function(n){
7
- return n.category===cate;
7
+ return n.category === cate;
8
- });
8
+ });
9
9
  ```
10
10
 
11
11
  の `return` で返す boolean の式を、以下のように修正するといかがでしょうか?
12
12
 
13
13
  ```javascript
14
- filterdata=$.grep(alldata,function(n){
14
+ filterdata = $.grep(alldata,function(n){
15
- return n.category.indexOf(cate) >= 0;
15
+ return n.category.indexOf(cate) >= 0;
16
- });
16
+ });
17
- ```
17
+ ```
18
+  
19
+ 参考までに、ご提示のコードを jsFiddle に写し、上記の修正をしたものが以下です。
20
+
21
+ [http://jsfiddle.net/jun68ykt/8fm81f8z/2/](http://jsfiddle.net/jun68ykt/8fm81f8z/2/)