使用同型过滤器的默认选择

时间:2016-02-12 18:01:45

标签: jquery filter

使用同位素插件过滤条目:http://isotope.metafizzy.co/

我希望默认选择过滤器。即使我添加了is-checked,它仍会显示所有内容,直到我做出选择



$(function() {
  // init Isotope
  var $grid = $('.grid').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-button-group').on('click', 'button', function() {
    var filterValue = $(this).attr('data-filter');
    // use filterFn if matches value
    filterValue = filterFns[filterValue] || filterValue;
    $grid.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 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script>


<div class="button-group filters-button-group" align="center">
  <button class="button is-checked" data-filter=".5">Default</button>
  <button class="button" data-filter=".6">Second</button>
  <button class="button" data-filter=".7">Third</button>
  <button class="button" data-filter="*">Show All</button>
</div>
&#13;
&#13;
&#13;

0 个答案:

没有答案