回答編集履歴
1
tuiiki
test
CHANGED
|
@@ -111,3 +111,149 @@
|
|
|
111
111
|
</div>
|
|
112
112
|
|
|
113
113
|
```
|
|
114
|
+
|
|
115
|
+
# 追記
|
|
116
|
+
|
|
117
|
+
なんとなく理解した内容を反映
|
|
118
|
+
|
|
119
|
+
カスタムデータに複数データを持つ方法
|
|
120
|
+
|
|
121
|
+
```HTML
|
|
122
|
+
|
|
123
|
+
data-type='["hotel","restaurant"]'
|
|
124
|
+
|
|
125
|
+
data-type='["hotel"]'
|
|
126
|
+
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
のようにしてください。
|
|
130
|
+
|
|
131
|
+
ただし、他のタグがdata-typeを1種しか持たなくても配列形式にしてください
|
|
132
|
+
|
|
133
|
+
|
|
134
|
+
|
|
135
|
+
|
|
136
|
+
|
|
137
|
+
```javascript
|
|
138
|
+
|
|
139
|
+
<script>
|
|
140
|
+
|
|
141
|
+
$(function(){
|
|
142
|
+
|
|
143
|
+
$('.js_target').hide();
|
|
144
|
+
|
|
145
|
+
var choice=function(me){
|
|
146
|
+
|
|
147
|
+
var types=$('[name=type]:checked').map(function(){
|
|
148
|
+
|
|
149
|
+
return $(this).val();
|
|
150
|
+
|
|
151
|
+
}).get();
|
|
152
|
+
|
|
153
|
+
$('.js_target').hide().filter(function(){
|
|
154
|
+
|
|
155
|
+
return $(this).data('type').some(function(x){
|
|
156
|
+
|
|
157
|
+
return $.inArray(x,types)>=0;
|
|
158
|
+
|
|
159
|
+
});
|
|
160
|
+
|
|
161
|
+
}).show();
|
|
162
|
+
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
$('[name=type],[name=object]').on('change',choice);
|
|
166
|
+
|
|
167
|
+
});
|
|
168
|
+
|
|
169
|
+
</script>
|
|
170
|
+
|
|
171
|
+
|
|
172
|
+
|
|
173
|
+
<div class="js_conditions" data-type="type">
|
|
174
|
+
|
|
175
|
+
<div>項目1</div>
|
|
176
|
+
|
|
177
|
+
<div>
|
|
178
|
+
|
|
179
|
+
<ul>
|
|
180
|
+
|
|
181
|
+
<li><input id="type-hotel" type="checkbox" name="type" value="hotel"><label for="type-hotel">ホテル</label></li>
|
|
182
|
+
|
|
183
|
+
<li><input id="type-restaurant" type="checkbox" name="type" value="restaurant"><label for="type-restaurant">レストラン</label></li>
|
|
184
|
+
|
|
185
|
+
<li><input id="type-spot" type="checkbox" name="type" value="spot"><label for="type-spot">観光地</label></li>
|
|
186
|
+
|
|
187
|
+
</ul>
|
|
188
|
+
|
|
189
|
+
</div>
|
|
190
|
+
|
|
191
|
+
</div>
|
|
192
|
+
|
|
193
|
+
|
|
194
|
+
|
|
195
|
+
<div class="js_conditions" data-type="object">
|
|
196
|
+
|
|
197
|
+
<div>項目2</div>
|
|
198
|
+
|
|
199
|
+
<div>
|
|
200
|
+
|
|
201
|
+
<ul>
|
|
202
|
+
|
|
203
|
+
<li><input id="object-resort" type="checkbox" name="object" value="resort"><label for="object-resort">リゾートホテル</label></li>
|
|
204
|
+
|
|
205
|
+
<li><input id="object-hiclass" type="checkbox" name="object" value="hiclass"><label for="object-hiclass">高級ホテル</label></li>
|
|
206
|
+
|
|
207
|
+
<li><input id="object-guesthouse" type="checkbox" name="object" value="guesthouse"><label for="object-guesthouse">民宿</label></li>
|
|
208
|
+
|
|
209
|
+
</ul>
|
|
210
|
+
|
|
211
|
+
</div>
|
|
212
|
+
|
|
213
|
+
</div>
|
|
214
|
+
|
|
215
|
+
|
|
216
|
+
|
|
217
|
+
<div class="js_conditions" data-type="period">
|
|
218
|
+
|
|
219
|
+
<div>項目3</div>
|
|
220
|
+
|
|
221
|
+
<div>
|
|
222
|
+
|
|
223
|
+
<ul>
|
|
224
|
+
|
|
225
|
+
<li><input id="period-100" type="checkbox" name="period" value="100"><label for="period-100">100</label></li>
|
|
226
|
+
|
|
227
|
+
<li><input id="period-200" type="checkbox" name="period" value="200"><label for="period-200">200</label></li>
|
|
228
|
+
|
|
229
|
+
<li><input id="period-300" type="checkbox" name="period" value="300"><label for="period-300">300</label></li>
|
|
230
|
+
|
|
231
|
+
</ul>
|
|
232
|
+
|
|
233
|
+
|
|
234
|
+
|
|
235
|
+
</div>
|
|
236
|
+
|
|
237
|
+
</div>
|
|
238
|
+
|
|
239
|
+
<div>
|
|
240
|
+
|
|
241
|
+
<ul>
|
|
242
|
+
|
|
243
|
+
<li class="js_target" data-type='["hotel","restaurant"]' data-object="resort" data-period="200">ホテルハワイ・ハワイアンレストラン</li>
|
|
244
|
+
|
|
245
|
+
<li class="js_target" data-type='["hotel"]' data-object="hiclass" data-period="300">五十嵐ホテル</li>
|
|
246
|
+
|
|
247
|
+
<li class="js_target" data-type='["hotel"]' data-object="hotel" data-period="100">やどや</li>
|
|
248
|
+
|
|
249
|
+
<li class="js_target" data-type='["restaurant"]' data-object="resort" data-period="200">海鮮レストラン</li>
|
|
250
|
+
|
|
251
|
+
<li class="js_target" data-type='["spot"]' data-object="hiclass" data-period="300">水族館</li>
|
|
252
|
+
|
|
253
|
+
</ul>
|
|
254
|
+
|
|
255
|
+
|
|
256
|
+
|
|
257
|
+
</div>
|
|
258
|
+
|
|
259
|
+
```
|