teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

調整

2020/11/21 00:48

投稿

yambejp
yambejp

スコア117967

answer CHANGED
@@ -16,4 +16,29 @@
16
16
  <li class="line" data-group='["red","green"]'>商品4</li>
17
17
  <li class="line" data-group='["green"]'>商品5</li>
18
18
  </ul>
19
+ ```
20
+ 上記性質を活かすとこう
21
+ ```javascript
22
+ <script>
23
+ $(function(){
24
+ $('button[data-group]').on('click',function(){
25
+ var group=$(this).data('group');
26
+ $('.line').hide().filter(function(){
27
+ return $.inArray(group,$(this).data('group'))>-1;
28
+ }).show();
29
+ });
30
+ });
31
+ </script>
32
+ <div class="buttonWrap">
33
+ <button data-group="red">赤</button>
34
+ <button data-group="yellow">黄色</button>
35
+ <button data-group="green">緑</button>
36
+ </div>
37
+ <ul class="list">
38
+ <li class="line" data-group='["red","green"]'>商品1(rg)</li>
39
+ <li class="line" data-group='["red"]'>商品2(r)</li>
40
+ <li class="line" data-group='["yellow"]'>商品3(y)</li>
41
+ <li class="line" data-group='["red","green"]'>商品4(rg)</li>
42
+ <li class="line" data-group='["green"]'>商品5(g)</li>
43
+ </ul>
19
44
  ```