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

Question

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

这是我用于排序的部分

  $('#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 中的示例