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

根据Isotopes Github论坛的讨论，我试图将jQuery对象传递给Isotopes过滤器选项。请阅读：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);
}

由于某种原因，当此对象传递到Isotope时，没有任何反应。这是我在记录对象时在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] proto ：对象[0] 长度：0 proto ：数组[0]

帮助？非常感谢，世界。

这是答案..我将一个数组而不是一个对象传递给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});
    },

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

同位素价格范围过滤

1 个答案: