同位素价格范围过滤 [英] 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>

我在jQuery范围滑块上有一个监听对象，该对象返回价格范围:

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

根据这里在同位素Github论坛上的讨论，我试图将jQuery对象传递给同位素过滤器选项.在这里阅读: https://github.com/desandro/isotope/issues/144# issuecomment-4595552

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

由于某种原因，当该物体被传递到同位素中时，什么也没发生.这是我记录对象时在Java脚本控制台中看到的内容

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 

上下文:文档 长度:9 prevObject:st.fn.st.init [30] 原始:对象[0] 长度:0 原始:数组[0]

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

有帮助吗?非常感谢，世界.

Help? Many thanks, world.

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

推荐答案

您需要告诉同位素如何确定要显示哪些元素.

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

在这种情况下，您要查找具有诸如priceXXXX之类的元素，并提取XXXX部分.使用正则表达式很容易做到这一点

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]*)/)

如果元素没有这样的类，并且像数组这样的数组，则结果将为null

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

[ "price9800", "9800" ]

使用parseInt将第二个元素转换为整数，然后与最低和最高价格设置进行比较. 也许像这样:

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

这篇关于同位素价格范围过滤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！