質問編集履歴
1
質問内容とソースコードを再編集
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
JavaScriptで絞り込み検索（
|
|
1
|
+
JavaScriptで絞り込み検索（data属性を複数設定したい）
|
test
CHANGED
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
※前回の質問が不適切だったため質問の内容を書き直しました。
|
|
2
|
+
前回の質問と内容が少し異なるのですが再度知恵をお貸いただけると有難いです。
|
|
3
|
+
（編集前の回答やコメントをくださった方有難うございました。質問の仕方が悪く申し訳ございません）
|
|
4
|
+
|
|
1
5
|
### 前提
|
|
2
6
|
|
|
3
7
|
お世話になります。
|
|
@@ -5,101 +9,125 @@
|
|
|
5
9
|
|
|
6
10
|
### 実現したいこと
|
|
7
11
|
|
|
8
|
-
|
|
12
|
+
「selectでtype01とtype02を選択した場合にアイテム04を表示させたい」
|
|
9
13
|
|
|
10
|
-
例えば
|
|
11
|
-
```
|
|
12
|
-
|
|
14
|
+
アイテム04にはtype01とtype02の2つのdata-typeを設定したいのですが、現在のJavaScriptのコードを流用して可能なのでしょうか。
|
|
13
|
-
|
|
15
|
+
（アイテム04のdivに「data-type="type01 type02"」と書いても絞り込み結果には表示されませんでした。）
|
|
14
|
-
```
|
|
15
|
-
という風に、暖色系を選択したときはvalueに入力された2つの要素を両方を表示したいです。
|
|
16
|
-
試しに入力しましたが絞り込みの結果が表示されなくなってしましました。
|
|
17
|
-
|
|
18
|
-
恐らくJavaScriptのコードのほうを変更しないとうまくいかないと思うのですがどのように変更すれば可能になるのかわからず困っています。
|
|
19
|
-
該当のソースコードを記載しますのでわかる方いらっしゃいましたら知恵を貸していただけたら嬉しいです。
|
|
20
16
|
|
|
21
17
|
|
|
22
18
|
### 該当のソースコード
|
|
23
19
|
|
|
20
|
+
```html
|
|
21
|
+
<div class="contents">
|
|
22
|
+
|
|
23
|
+
<div class="filter-area">
|
|
24
|
+
<div class="wrap">
|
|
25
|
+
<div class="box">
|
|
26
|
+
<p>選択項目</p>
|
|
27
|
+
<div class="select">
|
|
28
|
+
<select class="form-select js-filter" name="type">
|
|
29
|
+
<option value="all">全て</option>
|
|
30
|
+
<option value="type01">タイプ01</option>
|
|
31
|
+
<option value="type02">タイプ02</option>
|
|
32
|
+
<option value="type03">タイプ03</option>
|
|
33
|
+
</select>
|
|
34
|
+
</div>
|
|
35
|
+
</div>
|
|
36
|
+
</div>
|
|
37
|
+
</div>
|
|
38
|
+
<!-- /filter-area -->
|
|
39
|
+
|
|
40
|
+
<div class="item-area">
|
|
41
|
+
<div class="wrap">
|
|
42
|
+
<!------ 結果メッセージ ------>
|
|
43
|
+
<p>検索結果：<span class="js-filter-msg"></span></p>
|
|
44
|
+
<!------ アイテム一覧 ------>
|
|
45
|
+
<div class="js-filter-items">
|
|
46
|
+
|
|
47
|
+
<div class="js-filter-item" data-type="type01">
|
|
48
|
+
アイテム01
|
|
49
|
+
</div>
|
|
50
|
+
<div class="js-filter-item" data-type="type02">
|
|
51
|
+
アイテム02
|
|
52
|
+
</div>
|
|
53
|
+
<div class="js-filter-item" data-type="type03">
|
|
54
|
+
アイテム03
|
|
55
|
+
</div>
|
|
56
|
+
<div class="js-filter-item" data-type="type01 type02">
|
|
57
|
+
アイテム04
|
|
58
|
+
</div>
|
|
59
|
+
</div>
|
|
60
|
+
</div>
|
|
61
|
+
</div>
|
|
62
|
+
<!-- /item-area -->
|
|
63
|
+
|
|
64
|
+
</div>
|
|
65
|
+
<!-- /contents -->
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
```css
|
|
69
|
+
.d-none {
|
|
70
|
+
visibility: hidden;
|
|
71
|
+
display: none;
|
|
72
|
+
}
|
|
73
|
+
```
|
|
74
|
+
|
|
24
75
|
```JavaScript
|
|
25
|
-
function multi_filter(h, t, s, r =
|
|
76
|
+
function multi_filter(h, t, s, r = "") {
|
|
26
|
-
//****** 変数定義 ******
|
|
27
77
|
let hidden = h;
|
|
28
|
-
let target = t;
|
|
29
|
-
let targets = document.querySelectorAll(t
|
|
78
|
+
let targets = document.querySelectorAll(t);
|
|
30
79
|
let selects = document.querySelectorAll(s);
|
|
31
80
|
let result = document.querySelector(r);
|
|
32
|
-
let result_msg =
|
|
81
|
+
let result_msg = "";
|
|
82
|
+
|
|
33
83
|
|
|
34
84
|
if (selects) {
|
|
85
|
+
//****** for all select ******
|
|
86
|
+
for (let i of selects) {
|
|
87
|
+
i.addEventListener("change", () => {
|
|
88
|
+
let hidden_num = 0;
|
|
35
89
|
|
|
90
|
+
//*** for each target ***
|
|
91
|
+
for (let ii of targets) {
|
|
92
|
+
//*** delete hidden class ***
|
|
36
|
-
|
|
93
|
+
ii.classList.remove(hidden);
|
|
37
|
-
//***
|
|
94
|
+
//*** check target every select ***
|
|
38
|
-
for (let i
|
|
95
|
+
for (let iii of selects) {
|
|
39
|
-
select
|
|
96
|
+
//*** get select name value / option value / target data attribute ***
|
|
97
|
+
let value = iii.value;
|
|
40
|
-
let
|
|
98
|
+
let name = iii.getAttribute("name");
|
|
99
|
+
let item_data = ii.getAttribute("data-" + name);
|
|
100
|
+
//*** set hidden class ***
|
|
101
|
+
// exist value & except all & item_data not match & no hidden class
|
|
102
|
+
if (value && value !== "all" && value !== item_data && !ii.classList.contains(hidden)) {
|
|
103
|
+
ii.classList.add(hidden);
|
|
41
|
-
|
|
104
|
+
hidden_num++;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
}
|
|
42
108
|
|
|
109
|
+
//****** result message ******
|
|
110
|
+
if (result) {
|
|
111
|
+
//*** not found ***
|
|
43
|
-
|
|
112
|
+
if (hidden_num === targets.length) {
|
|
113
|
+
result_msg = "No such thing..";
|
|
114
|
+
}
|
|
115
|
+
//*** found ***
|
|
116
|
+
else {
|
|
117
|
+
let result_num = targets.length - hidden_num;
|
|
118
|
+
result_msg = result_num + " results";
|
|
119
|
+
}
|
|
120
|
+
result.innerText = result_msg;
|
|
121
|
+
}
|
|
44
122
|
|
|
45
|
-
//*** targetを順番に調べる ***
|
|
46
|
-
for (let ii = 0; ii < targets_length; ii++) {
|
|
47
|
-
//*** 非表示クラスを一旦削除 ***
|
|
48
|
-
targets[ii].classList.remove(hidden);
|
|
49
|
-
//*** セレクトボックスの数だけ総当たりで検索 ***
|
|
50
|
-
for (let iii = 0; iii < selects_length; iii++) {
|
|
51
|
-
//*** selectのname値 / optionのvalue値 / targetの文字列を取得 ***
|
|
52
|
-
let value = selects[iii].value;
|
|
53
|
-
let name = selects[iii].getAttribute('name');
|
|
54
|
-
let item_data = targets[ii].getAttribute('data-' + name);
|
|
55
|
-
//*** value値が存在＆all以外＆一致しない / 非表示クラスなしのとき：非表示クラスを付与 ***
|
|
56
|
-
if (value && value !== 'all' && value !== item_data && !targets[ii].classList.contains(hidden)) {
|
|
57
|
-
targets[ii].classList.add(hidden);
|
|
58
|
-
|
|
123
|
+
});
|
|
59
|
-
|
|
124
|
+
}
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
},);
|
|
64
|
-
|
|
65
|
-
//****** 結果メッセージ ******
|
|
66
|
-
if (result) {
|
|
67
|
-
//*** 該当なし ***
|
|
68
|
-
if (hidden_num === targets_length) {
|
|
69
|
-
result_msg = '見つかりませんでした。';
|
|
70
|
-
}
|
|
71
|
-
//*** 該当あり ***
|
|
72
|
-
else {
|
|
73
|
-
let result_num = targets_length - hidden_num;
|
|
74
|
-
result_msg = result_num + '件見つかりました。';
|
|
75
|
-
}
|
|
76
|
-
result.innerText = result_msg;
|
|
77
|
-
}
|
|
78
|
-
});
|
|
79
|
-
}
|
|
80
125
|
}
|
|
81
126
|
}
|
|
82
127
|
|
|
83
|
-
//***
|
|
128
|
+
//*** call ***
|
|
84
|
-
multi_filter(
|
|
129
|
+
multi_filter("d-none", ".js-filter-item", ".js-filter", ".js-filter-msg");
|
|
85
130
|
```
|
|
86
131
|
|
|
87
|
-
```html
|
|
88
|
-
<div class="filter-area">
|
|
89
|
-
<div class="box">
|
|
90
|
-
絞り込み検索
|
|
91
|
-
</div>
|
|
92
|
-
<div class="box">
|
|
93
|
-
<p>項目</p>
|
|
94
|
-
<div class="select">
|
|
95
|
-
<select class="form-select js-filter" name="type01">
|
|
96
|
-
<option value="all">すべての色</option>
|
|
97
|
-
<option value="red yellow">暖色系</option>
|
|
98
|
-
<option value="blue green">寒色系</option>
|
|
99
|
-
<option value="etc">その他</option>
|
|
100
|
-
</select>
|
|
101
|
-
</div>
|
|
102
|
-
</div>
|
|
103
|
-
</div>
|
|
104
|
-
```
|
|
105
132
|
|
|
133
|
+
|