teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問jqueryでの配列から絞り込んだデータをさらに絞り込み表示させたい

編集履歴

質問編集履歴

2

題名変更。jqueryとhtmlの記述を更新し、質問内容を具体的にしました。

2018/11/28 14:20

投稿

toramo
toramo

スコア14

test CHANGED
@@ -1 +1 @@
1
- jqueryでの配列を絞り込み、クリックで詳細を表示させたい
1
+ jqueryでの配列から絞り込んだデータをさらに絞り込み表示させたい
test CHANGED
@@ -36,92 +36,216 @@
36
36
 
37
37
 
38
38
 
39
+ ※11/28 下記のスクリプトを編集しています。
40
+
41
+
42
+
39
43
  ### 試したこと
40
44
 
41
- 元々別件で動いていたスクリプトがあったため、それを編集して
45
+ 元々別件で動いていたスクリプトがあったため、それを編集し
42
46
 
43
47
  ```jquery
44
48
 
45
49
  $(function() {
46
50
 
47
- var List = [
51
+ 　var allList = [
48
52
 
49
53
  　　{
50
54
 
51
- 　　age:"20代",
55
+ 　　age:"20",
52
56
 
53
57
  　　name:"田中太郎",
54
58
 
55
- 　　chara:"A",
59
+ 　　chara:["A","B","D","A","C","B","B"],
56
-
60
+
57
- 　　skill:"炭酸飲料の一気飲み",
61
+ 　　skill:["炭酸飲料の一気飲み","グリーンピースの早食い","特技３","特技４","特技５","特技６","特技７"],
58
-
62
+
59
- 　　desc:"調子がいい時は2リットルを30秒以内に飲める。",
63
+ 　　desc:["調子がいい時は2リットルを30秒以内に飲める。","一度喉に詰まらせてから全盛期の勢いを失くした","説明３","説明４","説明５","説明６","説明７"],
60
-
61
- 　　},
62
64
 
63
65
  　　{
64
66
 
65
- 　　age:"20代",
67
+ 　　age:"20",
66
-
68
+
67
- 　　name:"田中太郎",
69
+ 　　name:"鈴木花子",
68
-
69
- 　　chara:"B",
70
+
70
-
71
- 　　skill:"グリーンピースの早食い",
72
-
73
- 　　desc:"一度喉に詰まらせてから全盛期の勢いを失くした",
74
-
75
- 　　},
76
-
77
- 　　【以下ずっと続きます】
71
+ 【以下、ずっと続きます】
78
-
72
+
79
- 　];
73
+ ];
80
74
 
81
75
 
82
76
 
83
77
  　var productTemplate = _.template($("#productTemplate").text());
84
78
 
79
+ 　$(".filter_age input").on("click", render);
80
+
81
+ 　　render(allList);
82
+
83
+
84
+
85
85
  　function render() {
86
86
 
87
+ var age = $('[name="age"]:checked').val();
88
+
87
- 　　　　 var list = _(List).value();
89
+ var list = _(allList)
90
+
88
-
91
+ .filter(filterByAge(age))
92
+
93
+ .value();
94
+
95
+
96
+
89
- $('.productArea').html(productTemplate({list: list}));
97
+ 　　$('.productArea').html(productTemplate({list: list}));
98
+
90
-
99
+ 　　$("#filter_name input").on("click", function() {
100
+
101
+ $('#dn1').show();
102
+
103
+ $('.displaynone').hide();
104
+
105
+ });
106
+
107
+ 　　$(".info_chara li").on("click", function() {
108
+
109
+ $('.displaynone').show();
110
+
111
+ });
112
+
91
- };
113
+ 　　　};
114
+
115
+
116
+
117
+ 　　function filterByAge(value) {
118
+
119
+ return (value == "") ? _.constant(true) : function(item) {
120
+
121
+ 　var ranges = {
122
+
123
+ 　 1: {age: "20"},
124
+
125
+ 2: {age: "30"},
126
+
127
+ 3: {age: "40"},
128
+
129
+ 4: {age: "50"},
130
+
131
+ };
132
+
133
+ var range = ranges[value];
134
+
135
+ return range.age== item.age;
136
+
137
+ }
138
+
139
+ }
92
140
 
93
141
  });
94
142
 
95
143
  ```
96
144
 
97
- としてみましたが、動きませんでした。
145
+ として、
98
146
 
99
147
  ```html
100
148
 
149
+ <div id="filter_age">
150
+
151
+ 　<label><input type="radio" name="age" value="1"><span>20代</span></label> |
152
+
153
+ 　<label><input type="radio" name="age" value="2"><span>30代</span></label> |
154
+
155
+ 　<label><input type="radio" name="age" value="3"><span>40代</span></label> |
156
+
157
+ 　<label><input type="radio" name="age" value="4"><span>50代</span></label>
158
+
159
+ </div>
160
+
101
161
  <div class="productArea">
102
162
 
103
163
  <script type="text/template" id="productTemplate">
104
164
 
165
+ 　<div id="filter_name">
166
+
105
- <% _.each(list, function(line) { %>
167
+ 　　<% _.each(list, function(line) { %>
168
+
106
-
169
+ <label><input type="radio" name="name" value="<%= line.name %>"><span><%= line.name %></span></label>
170
+
171
+ 　　<% }) %>
172
+
173
+ 　</div>
174
+
175
+ 　<div id="dn1">
176
+
177
+ <% _.each(list, function(line) { %>
178
+
107
- <div class="product">
179
+ 　　 <div class="product">
180
+
108
-
181
+ <ul class="info_chara">
182
+
109
- 【ここに枠組みを作り<%= line.name %>のような形で要素を入れる】
183
+ 　　　　　　<% _.each(line.chara, function(tag) { %>
184
+
110
-
185
+ <li class="productTitle"><span><%= tag %></span></li>
186
+
187
+ <% })%>
188
+
189
+ </ul>
190
+
111
- </div>
191
+ </div>
192
+
193
+
194
+
112
-
195
+ 　<div id="right">
196
+
197
+ 　　<table>
198
+
199
+ 　　　<tr><th>名前</th><th>年齢</th><th>適性</th></tr>
200
+
201
+ 　　　<tr><td><span class="displaynone"><%= line.name %></span></td>
202
+
203
+ 　　　　　<td><span class="displaynone"><%= line.age %></span></td>
204
+
205
+ 　　　　　<td><span class="displaynone"><%= line.chara %></span></td></tr>
206
+
207
+ 　　　<tr><th colspan="3">特技</th></tr>
208
+
209
+ 　　　<tr><td colspan="3"><span class="displaynone"><%= line.skill %></span></td></tr>
210
+
211
+ 　　　<tr><th colspan="3">説明</th></tr>
212
+
213
+ 　　　<tr><td colspan="3"><span class="displaynone"><%= line.desc %></span></td></tr>
214
+
215
+ </table>
216
+
217
+ </div>
218
+
113
- <% }) %>
219
+ <% })%>
220
+
221
+ </div>
114
222
 
115
223
  </script>
116
224
 
117
- </div>
118
-
119
225
  ```
120
226
 
227
+ と記述しました。
228
+
229
+ すると、
230
+
121
- HTMLの部分も絞り込みをどのように実施すればよいのかが分からず
231
+ 「・年代をクリックするごとにその年代に合致した人物一覧が下に表示される」は
232
+
122
-
233
+ 絞り込みによりクリアできたのですが
234
+
235
+ その下の適性一覧とその横のテーブルが全ての人物の全ての適性分表示されてしまいます。
236
+
237
+
238
+
123
- まだ全く組めずにいるのですが、一応該当部分を載せておきます。
239
+ 人物名をクリックすることで適性一覧も絞り込み表示させたいのですが
240
+
124
-
241
+ 人物リストは最初の絞り込みの結果でテンプレート上に出力されたものになっているので
242
+
125
-
243
+ どうやってさらに絞り込みで値を取り出すのかが自分には分かりませんでした。
244
+
126
-
245
+ （テーブルのline.charaをline.chara[x]にすると一つに絞り込めそうですが
246
+
247
+ 　そのxの拾い方が分からないのです）
248
+
249
+
250
+
127
- 白紙のような状態で申し訳ありませんが、回答よろしくお願いいたします。
251
+ どうか教えていただきたく思います。回答よろしくお願いいたします。

1

インデントの修正。

2018/11/28 14:20

投稿

toramo
toramo

スコア14

test CHANGED
File without changes
test CHANGED
@@ -46,47 +46,49 @@
46
46
 
47
47
  var List = [
48
48
 
49
- {
49
+ 　　{
50
50
 
51
- age:"20代",
51
+ 　　age:"20代",
52
52
 
53
- name:"田中太郎",
53
+ 　　name:"田中太郎",
54
54
 
55
- chara:"A",
55
+ 　　chara:"A",
56
56
 
57
- skill:"炭酸飲料の一気飲み",
57
+ 　　skill:"炭酸飲料の一気飲み",
58
58
 
59
- desc:"調子がいい時は2リットルを30秒以内に飲める。",
59
+ 　　desc:"調子がいい時は2リットルを30秒以内に飲める。",
60
60
 
61
- },
61
+ 　　},
62
62
 
63
- {
63
+ 　　{
64
64
 
65
- age:"20代",
65
+ 　　age:"20代",
66
66
 
67
- name:"田中太郎",
67
+ 　　name:"田中太郎",
68
68
 
69
- chara:"B",
69
+ 　　chara:"B",
70
70
 
71
- skill:"グリーンピースの早食い",
71
+ 　　skill:"グリーンピースの早食い",
72
72
 
73
- desc:"一度喉に詰まらせてから全盛期の勢いを失くした",
73
+ 　　desc:"一度喉に詰まらせてから全盛期の勢いを失くした",
74
74
 
75
- },
75
+ 　　},
76
76
 
77
- 【以下ずっと続きます】
77
+ 　　【以下ずっと続きます】
78
78
 
79
- ];
79
+ 　];
80
80
 
81
81
 
82
82
 
83
- var productTemplate = _.template($("#productTemplate").text());
83
+ 　var productTemplate = _.template($("#productTemplate").text());
84
84
 
85
- function render() {
85
+ 　function render() {
86
86
 
87
- var list = _(List).value();
87
+ 　　　　 var list = _(List).value();
88
88
 
89
- $('.productArea').html(productTemplate({list: list}));
89
+ $('.productArea').html(productTemplate({list: list}));
90
+
91
+ };
90
92
 
91
93
  });
92
94