Q&A
###前提・実現したいこと
https://www.kunkalabs.com/mixitup/
こちらのライブラリを使用してソート機能を実装しているのですが、
moreボタンを押してロードできるようにしたいです。
###該当のソースコード
html
1<div id="mix-wrapper"> 2<ul> 3<li class="mix-target category01"><a href="">category01</a></li> 4<li class="mix-target category02"><a href="">category02</a></li> 5<li class="mix-target category01"><a href="">category01</a></li> 6<li class="mix-target category02"><a href="">category02</a></li> 7<li class="mix-target category01"><a href="">category01</a></li> 8<li class="mix-target category02"><a href="">category02</a></li> 9<li class="mix-target category01"><a href="">category01</a></li> 10<li class="mix-target category02"><a href="">category02</a></li> 11</ul> 12<div class="more">もっと見る</div> 13</div>
javascript
1mixitup('#mix-wrapper', { 2 load: { 3 }, 4 animation: { 5 effects: 'fade', 6 duration: 700 7 }, 8 classNames: { 9 block: 'item', 10 elementToggle: 'toggle-btn', 11 elementFilter: 'filter-btn', 12 elementSort: 'sort-btn' 13 }, 14 selectors: { 15 target: '.mix-target' 16 } 17}); 18 19//lazyload 20$(function() { 21//more 22 var listItem = $("ul li").length; 23 $("ul li:gt(3)").hide(); 24 25 var Num = 4; 26 $(".more").click(function(){ 27 Num +=4; 28 $("ul li:lt("+Num+")").fadeIn(); 29 30 if(listItem <= Num){ 31 $(".more").fadeOut(); 32 } 33 }) 34});
###試したこと
一応、moreボタンをつけて表示させるようにはしたのですが、
これだとソートされてないものまで表示されたりしてしまって。。
moreボタンを押して、さらにmixitupを実行させたりすればうまくいくのでしょうか。。
ご教示いただけますと助かります！よろしくお願いいたします。
回答1件
0
ベストアンサー
sort() メソッドを使えばよいのでは。
【API Methods – MixItUp Docs | KunkaLabs】
https://www.kunkalabs.com/mixitup/docs/api-methods/#mixitup.Mixer.sort
投稿2017/11/14 04:09
総合スコア69400
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/11/14 05:01
2017/11/14 06:15
2017/11/14 07:43