お世話になっております。
JQueryとJavaScriptでチェックボックスの絞り込みと、ボタンでの並び替えの混在を行いたいのですが、破壊的メソッドのためか、ボタンの並び替えを行うと、チェックボックスでの絞り込みが行えなくなります。

非破壊的メソッドで対応できるかと、

JavaScript
1``` price_arr.slice().sort(
2age_arr.slice().sort(
3としましたが、絞り込みも並び替えも動かなくなります。
4
5どうすれば、チェックボックスの絞り込みと、ボタンでの並び替えの混在させることができるでしょうか。。。。

特性の絞り込みは、チェックボックスを選択すると、classから特定のものを検出して表示させるようにしています。

ボタン並び替えは、.sortで行いっています。

<div class="narabi"> ...</div> が要素のひとかたまりです。

以下コードです。

html
1 <h3>特性から絞り込み
2 </h3>
3 <div class="price-tex">
4     <input type="checkbox" id="Feature1" data-group="0"><label for="Feature1">F1</label>
5     <input type="checkbox" id="Feature2" data-group="0"><label for="Feature2">F2</label>
6     <input type="checkbox" id="Feature3" data-group="0"><label for="Feature3">F3</label>
7     <input type="checkbox" id="Feature4" data-group="0"><label for="Feature4">F4</label>
8 </div>
9 </div>
10 <button id="price">
11     price順
12 </button>
13 <button id="age">
14     age数順
15 </button>
16
17 <div class="price-w-img">
18     <div class="narabi">
19         <div style="border: 1px solid;" class="col Feature1 Feature2 Feature3 Feature4">
20             <div class="paint-title">タイトル</span></div>
21             <div class="point-box">
22
23                 <div class="chara">
24                     <p>特性</p>
25                     <ul>
26                         <li>リスト</li>
27                         <li>リスト</li>
28                         <li>リスト</li>
29                         <li>リスト</li>
30                     </ul>
31                 </div>
32             </div>
33             <div>
34                 <p class="descrip">ディスクリプション</p>
35             </div>
36             <table class="space">
37                 <thead>
38                     <tr>
39                         <th>age数</th>
40                         <th>１</th>
41                         <th>２</th>
42                         <th>３</th>
43                         <th>４</th>
44                     </tr>
45                 </thead>
46                 <tbody>
47                     <tr>
48                         <td><span class="age" name="15">15</span>～20</td>
49                         <td><span class="price" name="799">799</span>,</td>
50                         <td>829,</td>
51                         <td>899,</td>
52                         <td>1,098,</td>
53                     </tr>
54                 </tbody>
55             </table>
56         </div>
57     </div>
58     <div class="narabi">
59         <div style="border: 1px solid;" class="col Feature1 Feature4 Feature5">
60             <div class="paint-title">タイトル</span></div>
61             <div class="point-box">
62
63                 <div class="chara">
64                     <p>特性</p>
65                     <ul>
66                         <li>リスト</li>
67                         <li>リスト</li>
68                         <li>リスト</li>
69                         <li>リスト</li>
70                     </ul>
71                 </div>
72             </div>
73             <div>
74                 <p class="descrip">ディスクリプション</p>
75             </div>
76             <table class="space">
77                 <thead>
78                     <tr>
79                         <th>age数</th>
80                         <th>１</th>
81                         <th>２</th>
82                         <th>３</th>
83                         <th>４</th>
84                     </tr>
85                 </thead>
86                 <tbody>
87                     <tr>
88                         <td><span class="age" name="20">20</span>以上</td>
89                         <td><span class="price" name="674">674,</span></td>
90                         <td>708,</td>
91                         <td>787,</td>
92                         <td>956,</td>
93                     </tr>
94                 </tbody>
95             </table>
96
97         </div>
98     </div>
99 </div>
100

JavaScript
1 <script>
2     $(function () {
3         var active = [];
4         var allArr = [];
5         var showClass,
6             href,
7             param = '';
8         var activeClass = 'active',
9             sortControl = $('.price-tex'),
10             sortTarget = $('.narabi > .col'),
11             groupLength = 1;
12 
13         if (location.search) {
14             var onload = location.search.slice(1).replace(/group.=/g, "").split('?');
15             var defArr = [];
16             for (var i = 0; i < onload.length; i++) {
17                 var filter = onload[i].split(',');
18                 defArr.push(filter);
19             }
20             var defCheck = '#' + defArr.join(',').replace(/,/g, ',#');
21             $(defCheck).prop('checked', 'checked');
22             defArr = '.' + defArr.join('|.').replace(/,/g, ',.');
23             defArr = defArr.split('|');
24             showClass = sortTarget;
25             for (var i = 0; i < defArr.length; i++) {
26                 var filter = defArr[i];
27                 showClass = showClass.filter(filter);
28             }
29             showClass.addClass(activeClass);
30             sortTarget.each(function () {
31                 if ($(this).hasClass(activeClass)) {
32                     $(this).show();
33                 } else {
34                     $(this).hide();
35                 }
36             });
37 
38         } else {
39             sortTarget.find('.col').addClass('active');
40         }
41 
42         sortControl.find('input[type="checkbox"]').change(function () {
43             active = [];
44             allArr = [];
45             param = '';
46             for (i = 0; i < groupLength; i++) {
47                 var arr = [];
48                 var filterArr = [];
49                 if (sortControl.find('input[type="checkbox"][data-group="' + i + '"]:checked').length) {
50                     sortControl.find('input[type="checkbox"][data-group="' + i + '"]:checked').each(
51                         function () {
52                             arr.push($(this).attr('id'));
53                             filterArr.push('.' + $(this).attr('id'));
54                         });
55                 }
56                 active[i] = arr;
57                 if (filterArr.length) {
58                     allArr.push(filterArr);
59                 }
60                 param += (active[i].length) ? '?group' + i + '=' + active[i] : '';
61             }
62 
63             showClass = sortTarget;
64 
65             if (allArr.length) {
66                 for (j = 0; j < allArr.length; j++) {
67                     var filter = allArr[j].join(',');
68                     showClass = showClass.filter(filter);
69                 }
70             }
71 
72             if ($.isEmptyObject(param) !== true) {
73                 history.pushState(null, null, param);
74             }
75             if (sortControl.find('input[type="checkbox"]:checked').length) {
76                 sortTarget.removeClass(activeClass);
77                 showClass.addClass(activeClass);
78                 sortTarget.each(function () {
79                     if ($(this).hasClass(activeClass)) {
80                         if (!$(this).is(':visible')) {
81                             $(this).show().css({
82                                 'z-index': '1'
83                             }).animate({
84                                 'z-index': '100'
85                             }, {
86                                 duration: 300,
87                                 step: function (now) {
88                                     $(this).css({
89                                         transform: 'scale(' + now / 100 +
90                                             ')'
91                                     });
92                                 }
93                             });
94                         }
95                     } else {
96                         $(this).css({
97                             'z-index': '100'
98                         }).animate({
99                             'z-index': '0'
100                         }, {
101                             duration: 300,
102                             step: function (now) {
103                                 $(this).css({
104                                     transform: 'scale(' + now * 0.01 + ')'
105                                 });
106                             },
107                             complete: function () {
108                                 $(this).hide();
109                             }
110                         });
111                     }
112                 });
113             } else {
114                 sortTarget.show().addClass(activeClass).show().css({
115                     'z-index': '1'
116                 }).animate({
117                     'z-index': '100'
118                 }, {
119                     duration: 300,
120                     step: function (now) {
121                         $(this).css({
122                             transform: 'scale(' + now / 100 + ')'
123                         });
124                     }
125                 });
126                 var defHref = location.href.replace(/?.*$/, "");
127                 history.pushState(null, null, defHref);
128             }
129         });
130     });
131 </script>
132 <!--ここまで特性分類-->
133 <script>
134     var price_arr = []; 
135 
136     $("#price").bind("click", function () {
137         $("div.narabi").each(function (i) {
138 
139             //価格ごとに連想配列にして配列に追加
140             price_arr[i] = {
141                 name: $(this).find(".price").text(),
142                 source: $(this).html()
143             };
144 
145         });
146 
147         //配列を並び替え
148         price_arr.sort(
149             function (a, b) {
150                 var a_name = a.name;
151                 var b_name = b.name;
152                 if (a_name < b_name) return -1;
153                 if (a_name > b_name) return 1;
154                 return 0;
155             });
156 
157         //配列を出力
158         for (var j = 0; j < price_arr.length; j++) {
159             $("div.narabi").eq(j).html(price_arr[j].source);
160         }
161     
162     });
163 </script>
164

age_arrはprice_arrと同じ記述
何卒、お力添えのほどよろしくお願いします。

yambejp

2019/10/16 09:27

HTMLをみても何をつかってどう絞り込み、何を使ってどう並べ替えるかわかりません。

pasomtr

2019/10/16 10:09

失礼致しました。特性でのチェックボックス絞り込みは、チェックボックスにつけている label for="FeatureN番と <div style="border: 1px solid;" class="col Feature1 Feature2 Feature3 Feature4"> 上記のクラス内が一致したものを取得する記述にしています。並び替えは、 以下の記述ですが、 <div class="narabi"> ...</div>内の <span class="age" name="15">15</span>～20 <span class="price" name="799"> ageとpriceの中身をそれぞれ取得し、. .sortで並び替えさせています。上記で説明不足でないでしょうか。。。

yambejp

2019/10/16 10:13

F1-F4はデフォルトでチェックなしなので、最初は表示されないのですね？

pasomtr

2019/10/16 10:18

デフォルトでは、 else { sortTarget.find('.col').addClass('active'); } で表示させています。以下のサイトを参考に作成いたしました。 https://qiita.com/Kackie/items/baf07e5e4b7a9e8ae096

yambejp

2019/10/16 10:36

デフォルトは全見せでチェックをすると絞り込みですか？ロジックがブレるのでやめたほうがよい処理ですが・・・全部見せるならすべてチェックしておいたほうがよいです

行動規範の内容に同意します

回答1件

ベストアンサー

まずは絞り込み

javascript
1<script>
2$(function(){
3  $('.price-tex :checkbox').on('change',function(){
4    var feature=$('.price-tex :checkbox:checked').map(function(){return $(this).attr('id');}).get();
5    $('.col').each(function(){
6      var cls=$(this).prop('classList');
7      var flg=feature.some(function(x){
8        return [].indexOf.call(cls,x)>-1;
9      });
10      $(this).toggle(flg);
11    });
12  }).eq(0).trigger('change');
13});
14</script>
15<h3>特性から絞り込み  
16</h3>  
17<div class="price-tex">  
18<input type="checkbox" id="Feature1" data-group="0"><label for="Feature1">F1</label>  
19<input type="checkbox" id="Feature2" data-group="0"><label for="Feature2">F2</label>  
20<input type="checkbox" id="Feature3" data-group="0"><label for="Feature3">F3</label>  
21<input type="checkbox" id="Feature4" data-group="0"><label for="Feature4">F4</label>  
22</div>  
23</div>  
24<button id="price">  
25price順  
26</button>  
27<button id="age">  
28age数順  
29</button>  
30
31<div class="price-w-img">  
32<div class="narabi">  
33<div style="border: 1px solid;" class="col Feature1 Feature3 Feature4">  
34<div class="paint-title">タイトル</span></div>  
35<span>Feature1 Feature3 Feature4</span>
36<div class="point-box">  
37
38<div class="chara">  
39<p>特性</p>  
40<ul>  
41<li>リスト</li>  
42<li>リスト</li>  
43<li>リスト</li>  
44<li>リスト</li>  
45</ul>  
46</div>  
47</div>  
48<div>  
49<p class="descrip">ディスクリプション</p>  
50</div>  
51<table border class="space">  
52<thead>  
53<tr>  
54<th>age数</th>  
55<th>１</th>  
56<th>２</th>  
57<th>３</th>  
58<th>４</th>  
59</tr>  
60</thead>  
61<tbody>  
62<tr>  
63<td><span class="age" name="15">15</span>～20</td>  
64<td><span class="price" name="799">799</span>,</td>  
65<td>829,</td>  
66<td>899,</td>  
67<td>1,098,</td>  
68</tr>  
69</tbody>  
70</table>  
71</div>  
72</div>  
73<div class="narabi">  
74<div style="border: 1px solid;" class="col Feature1 Feature4 Feature5">  
75<div class="paint-title">タイトル</span></div>  
76<div class="point-box">  
77<span>Feature1 Feature4 Feature5</span>
78
79<div class="chara">  
80<p>特性</p>  
81<ul>  
82<li>リスト</li>  
83<li>リスト</li>  
84<li>リスト</li>  
85<li>リスト</li>  
86</ul>  
87</div>  
88</div>  
89<div>  
90<p class="descrip">ディスクリプション</p>  
91</div>  
92<table border class="space">  
93<thead>  
94<tr>  
95<th>age数</th>  
96<th>１</th>  
97<th>２</th>  
98<th>３</th>  
99<th>４</th>  
100</tr>  
101</thead>  
102<tbody>  
103<tr>  
104<td><span class="age" name="20">20</span>以上</td>  
105<td><span class="price" name="674">674,</span></td>  
106<td>708,</td>  
107<td>787,</td>  
108<td>956,</td>  
109</tr>  
110</tbody>  
111</table>  
112
113</div>  
114</div>  
115</div>

で、並び替えって何をすればいいのでしょうか？

並び替えつき

javascript
1<script>
2$(function(){
3  $('.price-tex :checkbox').on('change',function(){
4    var feature=$('.price-tex :checkbox:checked').map(function(){return $(this).attr('id');}).get();
5    $('.col').each(function(){
6      var cls=$(this).prop('classList');
7      var flg=feature.some(function(x){
8        return [].indexOf.call(cls,x)>-1;
9      });
10      $(this).toggle(flg);
11    });
12  }).eq(0).trigger('change');
13  $('.sort').on('click',function(){
14    var id=$(this).attr('id');
15    var narabi=$('.narabi').get();
16    narabi.sort(function(x,y){
17      return parseInt($(x).find('.'+id).attr('name'))>parseInt($(y).find('.'+id).attr('name'));
18    });
19    $('.price-w-img').append(narabi);
20  });
21});
22</script>
23<h3>特性から絞り込み  
24</h3>  
25<div class="price-tex">  
26<input type="checkbox" id="Feature1" data-group="0"><label for="Feature1">F1</label>  
27<input type="checkbox" id="Feature2" data-group="0"><label for="Feature2">F2</label>  
28<input type="checkbox" id="Feature3" data-group="0"><label for="Feature3">F3</label>  
29<input type="checkbox" id="Feature4" data-group="0"><label for="Feature4">F4</label>  
30</div>  
31</div>  
32<button id="price" class="sort">  
33price順  
34</button>  
35<button id="age" class="sort">  
36age数順  
37</button>  
38
39<div class="price-w-img">  
40<div class="narabi">  
41<div style="border: 1px solid;" class="col Feature1 Feature3 Feature4">  
42<div class="paint-title">タイトル</span></div>  
43<span>Feature1 Feature3 Feature4 age:15 price:799</span>
44<div class="point-box">  
45
46<div class="chara">  
47<p>特性</p>  
48<ul>  
49<li>リスト</li>  
50<li>リスト</li>  
51<li>リスト</li>  
52<li>リスト</li>  
53</ul>  
54</div>  
55</div>  
56<div>  
57<p class="descrip">ディスクリプション</p>  
58</div>  
59<table border class="space">  
60<thead>  
61<tr>  
62<th>age数</th>  
63<th>１</th>  
64<th>２</th>  
65<th>３</th>  
66<th>４</th>  
67</tr>  
68</thead>  
69<tbody>  
70<tr>  
71<td><span class="age" name="15">15</span>～20</td>  
72<td><span class="price" name="799">799</span>,</td>  
73<td>829,</td>  
74<td>899,</td>  
75<td>1,098,</td>  
76</tr>  
77</tbody>  
78</table>  
79</div>  
80</div>  
81<div class="narabi">  
82<div style="border: 1px solid;" class="col Feature1 Feature4 Feature5">  
83<div class="paint-title">タイトル</span></div>  
84<div class="point-box">  
85<span>Feature1 Feature4 Feature5 age:20 price:674</span>
86
87<div class="chara">  
88<p>特性</p>  
89<ul>  
90<li>リスト</li>  
91<li>リスト</li>  
92<li>リスト</li>  
93<li>リスト</li>  
94</ul>  
95</div>  
96</div>  
97<div>  
98<p class="descrip">ディスクリプション</p>  
99</div>  
100<table border class="space">  
101<thead>  
102<tr>  
103<th>age数</th>  
104<th>１</th>  
105<th>２</th>  
106<th>３</th>  
107<th>４</th>  
108</tr>  
109</thead>  
110<tbody>  
111<tr>  
112<td><span class="age" name="20">20</span>以上</td>  
113<td><span class="price" name="674">674,</span></td>  
114<td>708,</td>  
115<td>787,</td>  
116<td>956,</td>  
117</tr>  
118</tbody>  
119</table>  
120
121</div>  
122</div>  
123</div>

投稿2019/10/16 10:38

編集2019/10/16 11:02

yambejp

総合スコア116661

pasomtr

2019/10/16 10:47

並び替えは、 <button id="age"> age数順 </button> を押すと <div class="narabi"> ...</div>内の <td><span class="age" name="20">20</span>以上</td> の数値を取得して、昇順で<div class="narabi"> ...</div>を並び替える処理をしたいです。また、 <button id="price"> price順 </button> を押すと <div class="narabi"> ...</div>内の <td><span class="price" name="674">674,</span></td> の数値を取得して、同じく昇順で<div class="narabi"> ...</div>を並び替える処理をしたいです。