javascript - Newbie: uncertain where to go next with isotope filtering -

javascript - Newbie: uncertain where to go next with isotope filtering -

i attempting code isotope fiilter site here: http://testerparm.b1.jcink.com/index.php?act=pages&pid=1

unfortunately, i'm quite new working code , i've nail road block. first category of buttons/filters (labeled groups) work fine. however, sec , 3rd categories of buttons not filtering want them to. click on 1 of buttons , nil happen.

here html , javascript custom webpage:

<script src="http://testerparm.b1.jcink.com/uploads/testerparm/isotope_pkgd_min.js"></script> <script src="testerparm.b1.jcink.com/uploads/testerparm/isotope_pkgd.js"></script> <script type='text/javascript'> $( function() { // init isotope var $container = $('.isotope').isotope({ itemselector: '.element-item', layoutmode: 'fitrows' }); // filter functions var filterfns = { // show if number greater 50 numbergreaterthan50: function() { var number = $(this).find('.number').text(); homecoming parseint( number, 10 ) > 50; }, // show if name ends -ium ium: function() { var name = $(this).find('.name').text(); homecoming name.match( /ium$/ ); } }; // bind filter button click $('#filters').on( 'click', 'button', function() { var filtervalue = $( ).attr('data-filter'); // utilize filterfn if matches value filtervalue = filterfns[ filtervalue ] || filtervalue; $container.isotope({ filter: filtervalue }); }); // alter is-checked class on buttons $('.button-group').each( function( i, buttongroup ) { var $buttongroup = $( buttongroup ); $buttongroup.on( 'click', 'button', function() { $buttongroup.find('.is-checked').removeclass('is-checked'); $( ).addclass('is-checked'); }); }); }); </script> <h1>politeia who's who</h1> <h2>groups:</h2> <div id="filters" class="button-group"> <button class="button is-checked" data-filter="*">all</button> <button class="button" data-filter=".staff">staff</button> <button class="button" data-filter=".player">player</button> <button class="button" data-filter=".character">character</button> <button class="button" data-filter=".aristocracy">aristocracy</button> <button class="button" data-filter=".auxiliary">auxiliary</button> <button class="button" data-filter=".criminal">criminal</button> <button class="button" data-filter=".majority">majority</button> <button class="button" data-filter=".police">police</button> </div> <p> <h2>gender:</h2> <div id="gender-filters" class="button-group"> <button class="button is-checked" data-filter="*">all</button> <button class="button" data-filter=".female">female</button> <button class="button" data-filter=".male">male</button> <button class="button" data-filter=".nb">non-binary</button> </div> <p> <h2>players:</h2> <div id="player-filters" class="button-group"> <button class="button is-checked" data-filter="*">all</button> <button class="button" data-filter=".test1">test1</button> <button class="button" data-filter=".test2">test2</button> </div> <p> <div class="isotope"> <div class="element-item staff" data-category="transition"> <h3 class="name">philosopher king</h3> <span title="this staff business relationship used official business."><a href="http://politeia.jcink.net/index.php?showuser=5"><img src="http://i.imgur.com/nmfx704.png" /></a></span> </div> <div class="element-item staff female test1" data-category="transition"> <h3 class="name">test1</h3> <span title="this staff business relationship used official business."><a href="http://politeia.jcink.net/index.php?showuser=5"><img src="http://i.imgur.com/nmfx704.png" /></a></span> </div> <div class="element-item staff test2 female" data-category="metalloid"> <h3 class="name">test2</h3> <span title="this staff business relationship used official business."><a href="http://politeia.jcink.net/index.php?showuser=5"><img src="http://i.imgur.com/nmfx704.png" /></a></span> </div> <div class="element-item character bulk male test1" data-category="post-transition"> <h3 class="name">gene lieber</h3> <span title="this staff business relationship used official business."><a href="http://politeia.jcink.net/index.php?showuser=5"><img src="http://i.imgur.com/nmfx704.png" /></a></span> </div> <div class="element-item character bulk male test1" data-category="post-transition"> <h3 class="name">frank piper</h3> <span title="this staff business relationship used official business."><a href="http://politeia.jcink.net/index.php?showuser=5"><img src="http://i.imgur.com/nmfx704.png" /></a></span> </div> <div class="element-item character bulk female test2" data-category="transition"> <h3 class="name">anna valentine</h3> <span title="this staff business relationship used official business."><a href="http://politeia.jcink.net/index.php?showuser=5"><img src="http://i.imgur.com/nmfx704.png" /></a></span> </div>

solved!

you have create functions other groups. notice selecting , applying function first grouping via:

$('#filters').on( 'click', 'button', function() {

duplicate block of logic each of other groups using own selector. example:

$('#gender-filters').on( 'click', 'button', function() {

...

$('#player-filters').on( 'click', 'button', function() {

javascript php css-filters