使用 Html Select 选项对 jQuery 同位素进行排序的问题

Question

使用 jQuery 和同位素插件我在通过更改下拉列表对项目进行排序时遇到了一些问题。你能看看 this demo 并告诉我为什么当我 select 排序值时我无法对同位素容器进行排序吗？

这是我用来排序的部分

  $('#sorts').on( 'change', function() {
    var sortByValue = this.value;
      console.log(sortByValue);
    $container.isotope({ sortBy: sortByValue });
  });

这里是整个同位素部分代码：

$( 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 on select change
  $('#filters').on( 'change', function() {
    // get filter value from option value
    var filterValue = this.value;
    // use filterFn if matches value
    filterValue = filterFns[ filterValue ] || filterValue;
    $container.isotope({ filter: filterValue });
  });

   // bind sort button click
  $('#sorts').on( 'change', function() {
    var sortByValue = this.value;
      console.log(sortByValue);
    $container.isotope({ sortBy: sortByValue });
  });  

});

Answer 1

我已经检查了这个例子，看看它是否有效

$('.isotope').isotope({
    itemSelector: '.element-item',
    layoutMode: 'fitRows',
    getSortData: {
      name: '.name',
      symbol: '.symbol',
      number: '.number parseInt',
      category: '[data-category]',
      weight: function( itemElem ) {
        var weight = $( itemElem ).find('.weight').text();
        return parseFloat( weight.replace( /[\(\)]/g, '') );
      }
    }
  });

查看 website

中的示例

使用 Html Select 选项对 jQuery 同位素进行排序的问题

Issue on Sorting jQuery Isotope Using Html Select Option

javascript

jquery

jquery-isotope