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

回答編集履歴

1

ならびかえ

2019/10/16 11:02

投稿

yambejp
yambejp

スコア117912

answer CHANGED
@@ -116,4 +116,131 @@
116
116
  </div>
117
117
  </div>
118
118
  ```
119
- で、並び替えって何をすればいいのでしょうか?
119
+ で、並び替えって何をすればいいのでしょうか?
120
+
121
+ # 並び替えつき
122
+ ```javascript
123
+ <script>
124
+ $(function(){
125
+ $('.price-tex :checkbox').on('change',function(){
126
+ var feature=$('.price-tex :checkbox:checked').map(function(){return $(this).attr('id');}).get();
127
+ $('.col').each(function(){
128
+ var cls=$(this).prop('classList');
129
+ var flg=feature.some(function(x){
130
+ return [].indexOf.call(cls,x)>-1;
131
+ });
132
+ $(this).toggle(flg);
133
+ });
134
+ }).eq(0).trigger('change');
135
+ $('.sort').on('click',function(){
136
+ var id=$(this).attr('id');
137
+ var narabi=$('.narabi').get();
138
+ narabi.sort(function(x,y){
139
+ return parseInt($(x).find('.'+id).attr('name'))>parseInt($(y).find('.'+id).attr('name'));
140
+ });
141
+ $('.price-w-img').append(narabi);
142
+ });
143
+ });
144
+ </script>
145
+ <h3>特性から絞り込み
146
+ </h3>
147
+ <div class="price-tex">
148
+ <input type="checkbox" id="Feature1" data-group="0"><label for="Feature1">F1</label>
149
+ <input type="checkbox" id="Feature2" data-group="0"><label for="Feature2">F2</label>
150
+ <input type="checkbox" id="Feature3" data-group="0"><label for="Feature3">F3</label>
151
+ <input type="checkbox" id="Feature4" data-group="0"><label for="Feature4">F4</label>
152
+ </div>
153
+ </div>
154
+ <button id="price" class="sort">
155
+ price順
156
+ </button>
157
+ <button id="age" class="sort">
158
+ age数順
159
+ </button>
160
+
161
+ <div class="price-w-img">
162
+ <div class="narabi">
163
+ <div style="border: 1px solid;" class="col Feature1 Feature3 Feature4">
164
+ <div class="paint-title">タイトル</span></div>
165
+ <span>Feature1 Feature3 Feature4 age:15 price:799</span>
166
+ <div class="point-box">
167
+
168
+ <div class="chara">
169
+ <p>特性</p>
170
+ <ul>
171
+ <li>リスト</li>
172
+ <li>リスト</li>
173
+ <li>リスト</li>
174
+ <li>リスト</li>
175
+ </ul>
176
+ </div>
177
+ </div>
178
+ <div>
179
+ <p class="descrip">ディスクリプション</p>
180
+ </div>
181
+ <table border class="space">
182
+ <thead>
183
+ <tr>
184
+ <th>age数</th>
185
+ <th>1</th>
186
+ <th>2</th>
187
+ <th>3</th>
188
+ <th>4</th>
189
+ </tr>
190
+ </thead>
191
+ <tbody>
192
+ <tr>
193
+ <td><span class="age" name="15">15</span>~20</td>
194
+ <td><span class="price" name="799">799</span>,</td>
195
+ <td>829,</td>
196
+ <td>899,</td>
197
+ <td>1,098,</td>
198
+ </tr>
199
+ </tbody>
200
+ </table>
201
+ </div>
202
+ </div>
203
+ <div class="narabi">
204
+ <div style="border: 1px solid;" class="col Feature1 Feature4 Feature5">
205
+ <div class="paint-title">タイトル</span></div>
206
+ <div class="point-box">
207
+ <span>Feature1 Feature4 Feature5 age:20 price:674</span>
208
+
209
+ <div class="chara">
210
+ <p>特性</p>
211
+ <ul>
212
+ <li>リスト</li>
213
+ <li>リスト</li>
214
+ <li>リスト</li>
215
+ <li>リスト</li>
216
+ </ul>
217
+ </div>
218
+ </div>
219
+ <div>
220
+ <p class="descrip">ディスクリプション</p>
221
+ </div>
222
+ <table border class="space">
223
+ <thead>
224
+ <tr>
225
+ <th>age数</th>
226
+ <th>1</th>
227
+ <th>2</th>
228
+ <th>3</th>
229
+ <th>4</th>
230
+ </tr>
231
+ </thead>
232
+ <tbody>
233
+ <tr>
234
+ <td><span class="age" name="20">20</span>以上</td>
235
+ <td><span class="price" name="674">674,</span></td>
236
+ <td>708,</td>
237
+ <td>787,</td>
238
+ <td>956,</td>
239
+ </tr>
240
+ </tbody>
241
+ </table>
242
+
243
+ </div>
244
+ </div>
245
+ </div>
246
+ ```