1

我所有的同位素元素都有描述价格的类。例如：

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

出于某种原因，当这个对象被传递到 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：Object[0] 长度：0 proto：Array[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});
    },
4

1 回答 1

0

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

在这种情况下，您要查找具有诸如 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 );
}
于 2013-06-20T04:34:51.867 回答