jQuery同位素添加剂(大于)过滤器

时间:2016-11-02 18:02:44

标签: javascript jquery wordpress filter isotope

这是我在这里的第一个问题所以:“Hello World”。

我的问题: 我正在使用Isotope jQuery插件开发wordpress主题。我设法添加了一些附加过滤器(术语和其他字段)。我唯一的麻烦是添加另外两个过滤器“Height”和“Width”,它们将与其余的过滤器“重叠”。过滤器应检查高度值是否小于50。与宽度相同。我尝试从Isotope文档中实现过滤器,但这些过滤器显示0项:/

以下是我的Isotope的实际初始化。

jQuery(document).ready(function($){

$(window).load( function() {

var $container = $('.grid').isotope({
            masonry: {
                columnWidth: '.grid-sizer',
                gutter: '.gutter-sizer',
            },
            itemSelector: '.grid-item',
            percentPosition: true,
});

var $output = $('#output');

// filter with selects and checkboxes
var $selects = $('#filters select');
var $checkboxes = $('#filters input');

$selects.add( $checkboxes ).change( function() {
  // map input values to an array
  var exclusives = [];
  var inclusives = [];
  // exclusive filters from selects
  $selects.each( function( i, elem ) {
    if ( elem.value ) {
      exclusives.push( elem.value );
    }
  });
  // inclusive filters from checkboxes
  $checkboxes.each( function( i, elem ) {
    // if checkbox, use value if checked
    if ( elem.checked ) {
      inclusives.push( elem.value );
    }
  });

  // combine exclusive and inclusive filters

  // first combine exclusives
  exclusives = exclusives.join('');

  var filterValue;
  if ( inclusives.length ) {
    // map inclusives with exclusives for
    filterValue = $.map( inclusives, function( value ) {
      return value + exclusives;
    });
    filterValue = filterValue.join(', ');
  } else {
    filterValue = exclusives;
  }

  $output.text( filterValue );
  $container.isotope({ filter: filterValue })
});

});

});

0 个答案:

没有答案