Isotope Price Range Filtering

问题

All of my isotope elements have classes describing the price. For example:

<figure class="items cap-top VAUT price9800 lon-118.40036 lat34.07364 isotope-item">... </figure>

I have a listening object on a jQuery range slider that returns a price range:

// Init price slider with range $0-$500
$('.slider').slider({
    min: 0,
max: 500,
step: 100,
value: [0,500]
});

//Price Slider Listener
$('#priceSlider').on('slideStop', function() {
    selectedPriceRange = $('input[id=priceSlider]').val();
    var priceRange = selectedPriceRange.split(',');

    //Pass the range the user has chosen to our function to filter isotope
    priceFilterTesting(riceRange[0], priceRange[1]);
});

Per the discussion on Isotopes Github forums here I am trying to pass a jQuery object to Isotopes filter option. Read Here: https://github.com/desandro/isotope/issues/144#issuecomment-4595552

    function priceFilterTesting(minPrice, maxPrice){
  var value = $('.items').filter(function(index){
    var $this = $(this);
    var matcharr = $this.attr('class').match(/price([0-9]*)/);
    if (matcharr) {
        var price = parseInt(matcharr[1]);
        return ((price >= minPrice) && (price <= maxPrice)) ? true : false;
    } else {
        return false;
    }
  });
  options = [];
  options[ 'filter' ] = value;
  console.log(options); 
  $('#results').isotope(options);
}

For some reason when this object is passed into Isotope, nothing happens. Here is what I see in java script console when I log my object

[filter: st.fn.st.init[9]]
filter: st.fn.st.init[9]
    0: figure.items pin cap-top SJWL price6500 lon-118.40036 lat34.07362 hasImage hasImage                 isotope-item
    1: figure.items pin cap-top SFUR price400 lon-118.40036 lat34.07362 hasImage hasImage isotope-item
    2: figure.items pin cap-top SFUR price199 lon-118.40036 lat34.07362 hasImage hasImage isotope-item
    3: figure.items pin cap-top SFUR price250 lon-118.40036 lat34.07362 hasImage hasImage isotope-item
    4: figure.items pin cap-top SFUR price599 lon-118.40036 lat34.07362 hasImage hasImage isotope-item
    5: figure.items pin cap-top SFUR price130 lon-118.40036 lat34.07362 hasImage hasImage isotope-item
    6: figure.items pin cap-top SFUR price299 lon-118.40036 lat34.07362 hasImage hasImage isotope-item
    7: figure.items pin cap-top SANT price125 lon-118.40036 lat34.07362 hasImage hasImage isotope-item
    8: figure.items pin cap-top VPAR price80 lon-118.40036 lat34.07362 hasImage hasImage 

context: document length: 9 prevObject: st.fn.st.init[30] proto: Object[0] length: 0 proto: Array[0]

Help? Many thanks, world.

Here's the answer.. I was passing an array and not an object into Isotope.. doh!!

    priceFilter: function(minPrice, maxPrice){
      var value = $('.items').filter(function(index){
        var $this = $(this);
        var matcharr = $this.attr('class').match(/price([0-9]*)/);
        if (matcharr) {
            var price = parseInt(matcharr[1]);
            return ((price >= minPrice) && (price <= maxPrice)) ? true : false;
        } else {
            return false;
        }
      });
      $('#results').isotope({filter:value});
    },

回答1:

You need to tell isotopes how to determine which of your elements you want to show.

In this case, you want to find elements that have a class like priceXXXX and extract the XXXX part. This is easily done with a regex

 $this.attr('class').match(/price([0-9]*)/)

The result there would be null if the element has no such class, and if it does an array like

[ "price9800", "9800" ]

Use parseInt to convert the second element to integer then compare with the min and max price settings. Perhaps something like:

function priceFilterTesting(minPrice, maxPrice){
  var value = $('.items').filter(function(index){
    var $this = $(this),
    var matcharr = $this.attr('class').match(/price([0-9]*)/);
    if (matcharr) {
     var price = parseInt(matcharr[1]);
     return ((price >= minPrice) && (price <= maxPrice)) ? true : false;
    } else {
     return false;
    }
  });
  options[ 'filter' ] = value;
  $container.isotope( options );
}

来源：https://stackoverflow.com/questions/17204951/isotope-price-range-filtering