同位素價格範圍過濾

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] 原：對象[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]*)/) 

結果會有NULL，如果元素沒有這樣的類來完成的，如果它確實像

[ "price9800", "9800" ] 

使用parseInt函數數組的第二個元素轉換爲然後與最小和最大價格設置進行比較。 也許是這樣的：

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