javascript - 新手: uncertain where to go next with isotope filtering

Question

我试图将同位素过滤器编码到我的网站中:http://testerparm.b1.jcink.com/index.php?act=Pages&pid=1

不幸的是，我对使用这样的代码还很陌生，并且遇到了障碍。第一类按钮/过滤器(标记为“组”)工作正常。但是，第二类和第三类按钮没有按照我希望的那样进行过滤。我将点击其中一个按钮，但什么也不会发生。

以下是自定义网页的 html 和 javascript:

<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 is greater than 50
    numberGreaterThan50: function() {
      var number = $(this).find('.number').text();
      return parseInt( number, 10 ) > 50;
    },
    // show if name ends with -ium
    ium: function() {
      var name = $(this).find('.name').text();
      return name.match( /ium$/ );
    }
  };
  // bind filter button click
  $('#filters').on( 'click', 'button', function() {
    var filterValue = $( this ).attr('data-filter');
    // use filterFn if matches value
    filterValue = filterFns[ filterValue ] || filterValue;
    $container.isotope({ filter: filterValue });
  });
  // change 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');
      $( this ).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 is the staff account used for 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 is the staff account used for 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 is the staff account used for 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 majority male test1" data-category="post-transition">
    <h3 class="name">Gene Lieber</h3>
    <span title="This is the staff account used for 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 majority male test1" data-category="post-transition">
    <h3 class="name">Frank Piper</h3>
    <span title="This is the staff account used for 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 majority female test2" data-category="transition">
    <h3 class="name">Anna Valentine</h3>
    <span title="This is the staff account used for official business."><a href="http://politeia.jcink.net/index.php?showuser=5"><img src="http://i.imgur.com/nMfx704.png" /></a></span>
  </div>

解决了!

Answer 1

您必须为其他组创建函数。请注意，您仅通过以下方式选择函数并将其应用到第一组:

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

使用其他每个组自己的选择器为每个其他组复制此逻辑 block 。例如:

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

...

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