teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問Jqueryのフィルタリング(絞り込み)を実行したい

編集履歴

質問編集履歴

6

文言修正

2019/05/10 00:26

投稿

opticalbase
opticalbase

スコア8

test CHANGED
@@ -1 +1 @@
1
- Jqueryの並べ替え(フィルタリング)を完成させたい
1
+ Jqueryのフィルタリング(絞り込み)を実行したい
test CHANGED
File without changes

5

文言修正

2019/05/10 00:26

投稿

opticalbase
opticalbase

スコア8

test CHANGED
File without changes
test CHANGED
@@ -84,43 +84,7 @@
84
84
 
85
85
  『パターン01』〜『パターン07』のリストを、「絞り込む」のボタンを押した際に、フィルタリングし表示したいです。
86
86
 
87
-
88
-
89
- 『パターン01』〜『パターン07』のリスト部分のhtmソースは、下記の内容です。
87
+
90
-
91
- ```ここに言語を入力
92
-
93
-
94
-
95
- <div data-sex="men wemen" data-tanmatsu="smart pc tablet" data-location="kanto" class="list"> パターン01 </div>
96
-
97
-
98
-
99
- <div data-sex="men " data-tanmatsu="smart tablet" data-location="kanto" class="list"> パターン02 </div>
100
-
101
-
102
-
103
- <div data-sex="men wemen" data-tanmatsu="pc tablet" data-location="kanto" class="list"> パターン03 </div>
104
-
105
-
106
-
107
- <div data-sex="men wemen" data-tanmatsu="smart tablet" data-location="kanto" class="list"> パターン04 </div>
108
-
109
-
110
-
111
-
112
-
113
- <div data-sex="men wemen" data-tanmatsu="smart pc" data-location="kanto" class="list"> パターン05 </div>
114
-
115
-
116
-
117
- <div data-sex="men wemen" data-tanmatsu="smart pc tablet" data-location="kanto" class="list"> パターン06 </div>
118
-
119
-
120
-
121
- <div data-sex="men wemen" data-tanmatsu="smart pc tablet" data-location="kanto kansai hokkaido tohoku" class="list"> パターン07 </div>
122
-
123
- ```
124
88
 
125
89
 
126
90
 

4

文言修正

2019/05/10 00:24

投稿

opticalbase
opticalbase

スコア8

test CHANGED
File without changes
test CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
 
8
8
 
9
- javascriptで、チェックボックスをクリックした後に、ラベルが動作している機能は、イアkのとおりです。
9
+ javascriptで、チェックボックスをクリックした後に、ラベルが動作している機能は、以下のとおりです。
10
10
 
11
11
  ```ここに言語を入力
12
12
 

3

加筆修正

2019/05/10 00:24

投稿

opticalbase
opticalbase

スコア8

test CHANGED
File without changes
test CHANGED
@@ -3,6 +3,74 @@
3
3
  途中まで動作していますが、「絞り込む」ボタンをクリックした移行の動作はまだ動作していません。
4
4
 
5
5
  [https://codepen.io/QAtool/pen/EzPzYR](https://codepen.io/QAtool/pen/EzPzYR)
6
+
7
+
8
+
9
+ javascriptで、チェックボックスをクリックした後に、ラベルが動作している機能は、イアkのとおりです。
10
+
11
+ ```ここに言語を入力
12
+
13
+ $(function() {
14
+
15
+ $('input[name="catItems[]"]').on('change', function() {
16
+
17
+ var catItems = [];
18
+
19
+ $('input[name="catItems[]"]:checked').each(function() {
20
+
21
+ catItems.push('<li class="tag-item">' + $(this).val() + '<span class="close"></span></li>');
22
+
23
+ });
24
+
25
+
26
+
27
+ $('ul.tag-list').html(catItems);
28
+
29
+
30
+
31
+ $('.tag-item').on('click', function(){
32
+
33
+ $(this).remove();
34
+
35
+
36
+
37
+ var text = $(this).text();
38
+
39
+ $('.list-options input[value=' + text + ']').prop( 'checked', false );
40
+
41
+
42
+
43
+ });
44
+
45
+
46
+
47
+ });
48
+
49
+
50
+
51
+ $('#clear').on('click', function() {
52
+
53
+ if($("input:checkbox[name='catItems[]']").prop( 'checked', false )){
54
+
55
+
56
+
57
+ $("input:checkbox[name='catItems[]']").prop( 'checked', false );
58
+
59
+ $('ul.tag-list').html('');
60
+
61
+
62
+
63
+ }
64
+
65
+ return false;
66
+
67
+ });
68
+
69
+
70
+
71
+ });
72
+
73
+ ```
6
74
 
7
75
 
8
76
 
@@ -18,7 +86,43 @@
18
86
 
19
87
 
20
88
 
21
-
89
+ 『パターン01』〜『パターン07』のリスト部分のhtmソースは、下記の内容です。
90
+
91
+ ```ここに言語を入力
92
+
93
+
94
+
95
+ <div data-sex="men wemen" data-tanmatsu="smart pc tablet" data-location="kanto" class="list"> パターン01 </div>
96
+
97
+
98
+
99
+ <div data-sex="men " data-tanmatsu="smart tablet" data-location="kanto" class="list"> パターン02 </div>
100
+
101
+
102
+
103
+ <div data-sex="men wemen" data-tanmatsu="pc tablet" data-location="kanto" class="list"> パターン03 </div>
104
+
105
+
106
+
107
+ <div data-sex="men wemen" data-tanmatsu="smart tablet" data-location="kanto" class="list"> パターン04 </div>
108
+
109
+
110
+
111
+
112
+
113
+ <div data-sex="men wemen" data-tanmatsu="smart pc" data-location="kanto" class="list"> パターン05 </div>
114
+
115
+
116
+
117
+ <div data-sex="men wemen" data-tanmatsu="smart pc tablet" data-location="kanto" class="list"> パターン06 </div>
118
+
119
+
120
+
121
+ <div data-sex="men wemen" data-tanmatsu="smart pc tablet" data-location="kanto kansai hokkaido tohoku" class="list"> パターン07 </div>
122
+
123
+ ```
124
+
125
+
22
126
 
23
127
  **【フィルタリングは、下記data- にて、絞り込みの条件を指定しています】**
24
128
 

2

文言修正

2019/05/10 00:23

投稿

opticalbase
opticalbase

スコア8

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,6 @@
1
1
  下記の、サンプルを実際に動作させたいと考えております。
2
2
 
3
- 途中まで動作していますが、「絞り込む」ボタンをクリックした移行の動作はまだ全く動作していません。
3
+ 途中まで動作していますが、「絞り込む」ボタンをクリックした移行の動作はまだ動作していません。
4
4
 
5
5
  [https://codepen.io/QAtool/pen/EzPzYR](https://codepen.io/QAtool/pen/EzPzYR)
6
6
 

1

文言修正

2019/05/09 23:24

投稿

opticalbase
opticalbase

スコア8

test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  途中まで動作していますが、「絞り込む」ボタンをクリックした移行の動作はまだ全く動作していません。
4
4
 
5
- https://codepen.io/QAtool/pen/EzPzYR
5
+ [https://codepen.io/QAtool/pen/EzPzYR](https://codepen.io/QAtool/pen/EzPzYR)
6
6
 
7
7
 
8
8