Изотоп Диапазон цен Фильтрация

Question

Все мои изотопные элементы имеют классы, описывающие цену. Например:

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

У меня есть объект прослушивания на ползунке диапазона JQuery, который возвращает диапазон цен:

// 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]); 
}); 

За обсуждение на Изотопы GitHub форумах здесь я пытаюсь передать объект JQuery для Опция фильтра изотопов. Читайте здесь: 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); 
} 

По какой-то причине, когда этот объект передается в Изотоп, ничего не происходит. Вот то, что я вижу в консоли сценария Java, когда я вхожу мой объект

[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 

контекст: документ Длина: 9 prevObject: st.fn.st.init [30] прото: Object [0] длина: 0 прото: Array [0]

Помощь? Большое спасибо, мир.

Вот ответ .. Я передавал массив, а не объект в Изотоп .. 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}); 
    }, 

Answer 1

Вы должны сказать изотопы, как определить, какие из элементов, которые вы хотите показать.

В этом случае вы хотите найти элементы, имеющие такой класс, как priceXXXX, и извлечь часть XXXX. Это легко сделать с помощью регулярных выражений

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

В результате не было бы нулевое значение, если элемент не имеет такого класса, и если он делает массив как

[ "price9800", "9800" ] 

Использование ParseInt для преобразования второго элемента integer, затем сравните с настройками минимальной и максимальной цены. Возможно, что-то вроде:

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); 
}