teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問jQuery　絞り込み検索:すべてを表示するボタンを作りたいです

編集履歴

質問編集履歴

1

教えて下さってありがとうございます！　重複分削除いたしました。

2018/01/17 06:25

投稿

alpaca540
alpaca540

スコア18

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,6 @@
1
1
  ###前提・実現したいこと
2
2
 
3
- jQueryで画像（150枚程）の絞り込み検索（or検索）をするにあたり
3
+ jQueryで画像の絞り込み検索をするにあたり
4
4
 
5
5
 
6
6
 
@@ -38,13 +38,19 @@
38
38
 
39
39
  ```html
40
40
 
41
+ <!--all（ページリロード）ボタン-->
42
+
41
43
  <input type="button" value="ALL" onclick="allselect()">
42
44
 
45
+
46
+
47
+ <!--画像絞り込み 選択欄-->
48
+
43
49
  <form>
44
50
 
45
51
  <div id="select">
46
52
 
47
- <div id="style">
53
+ <div id="style"><!--「style」と「color」はor検索-->
48
54
 
49
55
  <input type="checkbox" id="shirt"><label class="label" for="shirt">シャツ</label>
50
56
 
@@ -68,13 +74,17 @@
68
74
 
69
75
  </form>
70
76
 
77
+
78
+
79
+ <!--画像絞り込み 結果表示-->
80
+
71
81
  <div class="result">
72
82
 
73
83
  <section class="skirt white"><img src="image/sample.jpg" ></section>
74
84
 
75
85
  <section class="shirt pink"><img src="image/sample2.jpg" ></section>
76
86
 
77
- 〜
87
+ 〜<!--画像続く-->
78
88
 
79
89
  ```
80
90
 
@@ -142,7 +152,7 @@
142
152
 
143
153
  var checkcolor=$(this).prop('id');
144
154
 
145
- $('.result section').filter(function(){return $(this).hasClass(checkstyle) && $(this).hasClass(checkcolor);}).fadeIn();
155
+ $('.result section').filter(function(){return $(this).hasClass(checkstyle) && $(this).hasClass(checkcolor);}).show();
146
156
 
147
157
  });
148
158
 
@@ -156,7 +166,7 @@
156
166
 
157
167
  var checkcolor=$(this).prop('id');
158
168
 
159
- $('.result section').filter(function(){return $(this).hasClass(checkcolor);}).fadeIn();
169
+ $('.result section').filter(function(){return $(this).hasClass(checkcolor);}).show();
160
170
 
161
171
  });
162
172
 
@@ -168,7 +178,7 @@
168
178
 
169
179
  var checkstyle=$(this).prop('id');
170
180
 
171
- $('.result section').filter(function(){return $(this).hasClass(checkstyle);}).fadeIn();
181
+ $('.result section').filter(function(){return $(this).hasClass(checkstyle);}).show();
172
182
 
173
183
  });
174
184
 
@@ -196,214 +206,4 @@
196
206
 
197
207
  のご質問とご回答を参考に、少しだけ変更を加えさせていただいたものです。
198
208
 
199
- （ずっとやりたかった検索方法でとても助かりました。ありがとうございました）
200
-
201
- ###前提・実現したいこと
202
-
203
- jQueryで画像の絞り込み検索をするにあたり
204
-
205
-
206
-
207
- allのボタンをクリックすると、
208
-
209
- ◎ すべての画像を表示して、
210
-
211
- ◎ チェックボックスは選択されていない状態にする
212
-
213
- （チェックされた時に、cssで色がつくようにしています）
214
-
215
- という処理をしたいと思っております。
216
-
217
-
218
-
219
- 方法がわからず、現在はページをリロードする記述にしていますが、
220
-
221
- 画像が多いので、できればリロードしない方法を希望しております。
222
-
223
-
224
-
225
- 何か方法がありましたら、お教え頂きたくよろしくお願い致します。
226
-
227
-
228
-
229
-
230
-
231
-
232
-
233
-
234
-
235
- ###該当のソースコード
236
-
237
-
238
-
239
- ```html
240
-
241
- <!--all（ページリロード）ボタン-->
242
-
243
- <input type="button" value="ALL" onclick="allselect()">
244
-
245
-
246
-
247
- <!--画像絞り込み 選択欄-->
248
-
249
- <form>
250
-
251
- <div id="select">
252
-
253
- <div id="style"><!--「style」と「color」はor検索-->
254
-
255
- <input type="checkbox" id="shirt"><label class="label" for="shirt">シャツ</label>
256
-
257
- <input type="checkbox" id="skirt"><label class="label" for="skirt">スカート</label>
258
-
259
- <input type="checkbox" id="another"><label class="label" for="another">その他</label>
260
-
261
- </div>
262
-
263
- <div id="color">
264
-
265
- <input type="checkbox" id="white"><label class="label" for="white">ホワイト</label>
266
-
267
- <input type="checkbox" id="pink"><label class="label" for="pink">ピンク</label>
268
-
269
- <input type="checkbox" id="purple"><label class="label" for="purple">パープル</label>
270
-
271
- </div>
272
-
273
- </div>
274
-
275
- </form>
276
-
277
-
278
-
279
- <!--画像絞り込み 結果表示-->
280
-
281
- <div class="result">
282
-
283
- <section class="skirt white"><img src="image/sample.jpg" ></section>
284
-
285
- <section class="shirt pink"><img src="image/sample2.jpg" ></section>
286
-
287
- 〜<!--画像続く-->
288
-
289
- ```
290
-
291
-
292
-
293
- ```css
294
-
295
- input[type=checkbox] {
296
-
297
- display: none;
298
-
299
- }
300
-
301
- #select label{
302
-
303
- display: block;
304
-
305
- background-color:#ccc;
306
-
307
- color: #333;
308
-
309
- }
310
-
311
- #select input:checked + label {
312
-
313
- color:#fff;
314
-
315
- background-color: #333;
316
-
317
- }
318
-
319
- ```
320
-
321
-
322
-
323
- ```javascript
324
-
325
- <script>//header内
326
-
327
- function allselect(){
328
-
329
- location.reload(true)
330
-
331
- }
332
-
333
- </script>
334
-
335
-
336
-
337
- <script>//body内
338
-
339
- $(function(){
340
-
341
- $('.result section').show();
342
-
343
- $('#style,#color').find('input').on('click',function(){
344
-
345
- $('.result section').hide();
346
-
347
- $('#style [type=checkbox]:checked').each(function(){
348
-
349
- var checkstyle=$(this).prop('id');
350
-
351
- $('#color [type=checkbox]:checked').each(function(){
352
-
353
- var checkcolor=$(this).prop('id');
354
-
355
- $('.result section').filter(function(){return $(this).hasClass(checkstyle) && $(this).hasClass(checkcolor);}).show();
356
-
357
- });
358
-
359
- });
360
-
361
-
362
-
363
- if($('#style [type=checkbox]:checked').length==0){
364
-
365
- $('#color [type=checkbox]:checked').each(function(){
366
-
367
- var checkcolor=$(this).prop('id');
368
-
369
- $('.result section').filter(function(){return $(this).hasClass(checkcolor);}).show();
370
-
371
- });
372
-
373
- };
374
-
375
- if($('#color [type=checkbox]:checked').length==0){
376
-
377
- $('#style [type=checkbox]:checked').each(function(){
378
-
379
- var checkstyle=$(this).prop('id');
380
-
381
- $('.result section').filter(function(){return $(this).hasClass(checkstyle);}).show();
382
-
383
- });
384
-
385
- };
386
-
387
- }).trigger('change');
388
-
389
- });
390
-
391
- </script>
392
-
393
- ```
394
-
395
-
396
-
397
-
398
-
399
-
400
-
401
- ###補足情報
402
-
403
- 絞り込み検索は、
404
-
405
- [https://teratail.com/questions/85488]
406
-
407
- のご質問とご回答を参考に、少しだけ変更を加えさせていただいたものです。
408
-
409
209
  （ずっとやりたかった検索方法でとても有り難く、使用させて頂いております。ありがとうございます）