teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問複数カテゴリ絞り込みを実装したい

編集履歴

質問編集履歴

1

「実現したいこと」「HTML」「CSS」の訂正・追加

2019/02/05 04:17

投稿

sakio6
sakio6

スコア47

test CHANGED
File without changes
test CHANGED
@@ -12,19 +12,19 @@
12
12
 
13
13
 
14
14
 
15
- **1.複数項目選択でも同じ内容を表示したい**
15
+ **1.別項目選択でも同じ内容を表示したい**
16
+
16
-
17
+ 項目1の「ホテル」を選択した場合、【ホテルハワイ・ハワイアンレストラン】【五十嵐ホテル】【やどや】が結果として表示され、「レストラン」を選択した場合【海鮮レストラン】「観光地」を選択した場合【水族館】が表示されます。
18
+
17
- 　※現状項目から「A」を選択しますと「リスト1」が表示「B」を選択しますと「リスト2」が表示されますが、「B」を選択した時も「リスト1」が表示するようにしたいです。
19
+ 【ホテルハワイ・ハワイアンレストラン】にはレストランも含まれている為、「ホテル」未選択で「レストラン」を選択した場合も【ホテルハワイ・ハワイアンレストラン】が表示されるようにしたいです。
18
-
19
- ・「A」の項目選択→「リスト1」が表示
20
+
20
-
21
- ・「B」の項目選択→「リスト1」」「リスト2」が表示
21
+ また、【ホテルハワイ・ハワイアンレストラン】のようなパターンは今後増える予定です。
22
22
 
23
23
 
24
24
 
25
25
  **2.項目未選択時は全リスト非表示**
26
26
 
27
- 　※項目が未選択の時は現在全リストが表示されておりますが、未選択時は全リスト非表示で選択した項目に合うリストだけが表示されるように変更したいです。
27
+ 各項目が未選択の場合、選択結果表示部は非表示で項目からなにか選択された時点で選択結果表示部に表示するようにしたいです。
28
28
 
29
29
 
30
30
 
@@ -42,95 +42,97 @@
42
42
 
43
43
  <div class="js_conditions" data-type="type">
44
44
 
45
- <div>項目1</div>
45
+ <div>項目1</div>
46
-
46
+
47
- <div>
47
+ <div>
48
-
48
+
49
- <ul>
49
+ <ul>
50
-
50
+
51
- <li><input id="type-hoge" type="checkbox" name="type" value="hoge"><label for="type-hoge">項目1の選択1</label></li>
51
+ <li><input id="type-hotel" type="checkbox" name="type" value="hotel"><label for="type-hotel">ホテル</label></li>
52
+
52
-
53
+ <li><input id="type-restaurant" type="checkbox" name="type" value="restaurant"><label for="type-restaurant">レストラン</label></li>
54
+
53
- <li><input id="type-rest" type="checkbox" name="type" value="rest"><label for="type-rest">項目1の選択2</label></li>
55
+ <li><input id="type-spot" type="checkbox" name="type" value="spot"><label for="type-spot">観光地</label></li>
54
-
56
+
55
- </ul>
57
+ </ul>
56
-
58
+
57
- </div>
59
+ </div>
58
60
 
59
61
  </div>
60
62
 
61
-
63
+
62
64
 
63
65
  <div class="js_conditions" data-type="object">
64
66
 
65
- <div>項目2</div>
67
+ <div>項目2</div>
66
-
68
+
67
- <div>
69
+ <div>
68
-
70
+
69
- <ul>
71
+ <ul>
70
-
72
+
71
- <li><input id="object-one" type="checkbox" name="object" value="one"><label for="object-one">項目2の選択1</label></li>
73
+ <li><input id="object-resort" type="checkbox" name="object" value="resort"><label for="object-resort">リゾートホテル</label></li>
72
-
74
+
73
- <li><input id="object-two" type="checkbox" name="object" value="two"><label for="object-two">項目2の選択2</label></li>
75
+ <li><input id="object-hiclass" type="checkbox" name="object" value="hiclass"><label for="object-hiclass">高級ホテル</label></li>
74
-
76
+
75
- <li><input id="object-three" type="checkbox" name="object" value="three"><label for="object-three">項目2の選択3</label></li>
77
+ <li><input id="object-guesthouse" type="checkbox" name="object" value="guesthouse"><label for="object-guesthouse">民宿</label></li>
76
-
78
+
77
- </ul>
79
+ </ul>
78
-
80
+
79
- </div>
81
+ </div>
80
82
 
81
83
  </div>
82
84
 
83
-
85
+
84
86
 
85
87
  <div class="js_conditions" data-type="period">
86
88
 
87
- <div>項目3</div>
89
+ <div>項目3</div>
88
-
90
+
89
- <div>
91
+ <div>
90
-
92
+
91
- <ul>
93
+ <ul>
92
-
94
+
93
- <li><input id="period-100" type="checkbox" name="period" value="100"><label for="period-100">100</label></li>
95
+ <li><input id="period-100" type="checkbox" name="period" value="100"><label for="period-100">100</label></li>
94
-
96
+
95
- <li><input id="period-200" type="checkbox" name="period" value="200"><label for="period-200">200</label></li>
97
+ <li><input id="period-200" type="checkbox" name="period" value="200"><label for="period-200">200</label></li>
96
98
 
97
99
  <li><input id="period-300" type="checkbox" name="period" value="300"><label for="period-300">300</label></li>
98
100
 
99
- </ul>
101
+ </ul>
100
-
101
-
102
-
102
+
103
+
104
+
103
- </div>
105
+ </div>
104
106
 
105
107
  </div>
106
108
 
107
-
108
-
109
-
110
-
111
-
112
-
113
-
114
-
115
-
116
-
117
-
109
+
110
+
111
+
112
+
113
+
114
+
115
+
116
+
117
+
118
+
119
+
118
120
 
119
121
  <div>
120
122
 
121
- <ul>
123
+ <ul>
124
+
122
-
125
+ <li class="js_target" data-type="hotel" data-object="resort" data-period="200">ホテルハワイ・ハワイアンレストラン</li>
126
+
123
- <li class="js_target" data-type="rest" data-object="one" data-period="100">リスト1</li>
127
+ <li class="js_target" data-type="hotel" data-object="hiclass" data-period="300">五十嵐ホテル</li>
124
-
125
-
126
-
128
+
127
- <li class="js_target" data-type="hoge" data-object="two" data-period="200">リスト2</li>
129
+ <li class="js_target" data-type="hotel" data-object="hotel" data-period="100">やどや</li>
130
+
128
-
131
+ <li class="js_target" data-type="restaurant" data-object="resort" data-period="200">海鮮レストラン</li>
129
-
130
-
132
+
131
- <li class="js_target" data-type="rest" data-object="three" data-period="300">リスト3</li>
133
+ <li class="js_target" data-type="spot" data-object="hiclass" data-period="300">水族館</li>
132
-
134
+
133
- </ul>
135
+ </ul>
134
136
 
135
137
 
136
138
 
@@ -140,6 +142,12 @@
140
142
 
141
143
  ```CSS
142
144
 
145
+ input {
146
+
147
+ display: none;
148
+
149
+ }
150
+
143
151
  .js_target{
144
152
 
145
153
  display: none;
@@ -152,6 +160,32 @@
152
160
 
153
161
  }
154
162
 
163
+ .tab-btnbox > div:nth-of-type(2) ul li {
164
+
165
+ display: inline-block;
166
+
167
+ border: 1px solid #494949;
168
+
169
+ font-size: 16px;
170
+
171
+ margin: 0 5px 10px 0;
172
+
173
+ }
174
+
175
+ .tab-btnbox > div:nth-of-type(2) ul li label {
176
+
177
+ display: block;
178
+
179
+ width: 100%;
180
+
181
+ text-align: center;
182
+
183
+ padding: 10px 20px;
184
+
185
+ cursor: pointer;
186
+
187
+ }
188
+
155
189
  ```
156
190
 
157
191
  ```Javascript
@@ -352,15 +386,15 @@
352
386
 
353
387
  1つの項目選択で複数表示させる為にリスト部分の```data-type```にスペースを開けて複数記載してみましたが、反応しませんでした。
354
388
 
355
- ```data-type="rest 100"```のようにしましたが、「rest」「100」どちらも反応しなくなりました。
389
+ ```data-type="hotel restaurant"```のようにしましたが、「hotel」「restaurant」どちらも反応しなくなりました。
356
390
 
357
391
  jQueryも何度も見たのですが、どこでどう選択した項目が反応しているのか勉強不足の為検討も付きませんでした。
358
392
 
359
393
 
360
394
 
361
- 2つめの初めは全リスト非表示についてですが、CSSで出来ないかと考えてみましたが、
395
+ 2つめの項目未選択時選択結果非表示についてですが、CSSで出来ないかと考えてみましたが、
362
-
396
+
363
- クラス「js_selected」のJS側での制御がどのようになっているのか、なんとなくでしか理解出来なかった為コードを触る事が出来ませんでした。
397
+ クラス「.js_selected」のJS側での制御がどのようになっているのか、なんとなくでしか理解出来なかった為コードを触る事が出来ませんでした。
364
398
 
365
399
 
366
400