isotope.jsを実装したらなんとappendで追加した要素は動かないとの事。
仕方が無いので、自分でつくったれぇぇー!!!
今回は本ページのトップページを例に説明します。
HTMLコード
普通に、isotope.jsを実装するときと同じように組んで下さい(^_^)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!--絞り込みボタン--> <nav id="filters" class="button-group js-radio-button-group"> <button class="button is-checked" data-filter="*">全て表示</button> <button class="button" data-filter=".tech">技</button> <button class="button" data-filter=".hobby">趣味</button> <button class="button" data-filter=".eat">食べ歩き</button> <button class="button" data-filter=".fun">暮らし</button> </nav> <!--記事表示部分--> <ul id="content"> <li class="tech"><!--記事の内容--></li> <li class="eat"><!--記事の内容--></li> <li class="hobby"><!--記事の内容--></li> <li class="fun"><!--記事の内容--></li> </ul> |
JS部分
最初に、jQueryを読ませて下さい。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
//絞り込み選択ボタンにチェックを付ける $(function(){ $('.button-group').each( function( i, buttonGroup ) { var $buttonGroup = $( buttonGroup ); $buttonGroup.on( 'click', 'button', function() { $buttonGroup.find('.is-checked').removeClass('is-checked'); $( this ).addClass('is-checked'); flilter(); }); }); }); //絞り込み制御部分 function flilter(){ var filterValue = $("#filters").find('.is-checked').attr('data-filter'); var container = $('#content>li'); container.show() container.not(filterValue).hide(); } |