1

我正在尝试使用插件 list.js 为产品列表创建多个过滤器，即我想按颜色和项目过滤列表，目前下面的代码只是对红色项目进行过滤，我该如何更改它这样如果用户同时选择颜色和项目，它会正确过滤吗？

      <form id="filter">
         <select id ="colour" name="colour">
          <option value="0">All packages</option>
        <option value="1">Red</option>
        <option value="2" >Yellow</option>
        <option value="3" >Green</option>
    </select>
    <select id ="items" name="items">
        <option value="0">All items</option>
        <option value="1" >T-shirt</option>
        <option value="2">Trousers</option>
        <option value="3" >Jumper</option>

    </select>
</form>

$('#filter-clothes').click(function() {
        featureList.filter(function(item) {
            if (item.values().colour == "Red") {
                return true;
            } else {
                return false;
            }
        });
        return false;
    });
4

4 回答 4

2

我假设#filter-clothes 是用户单击以应用过滤器的按钮。

$('#filter-clothes').on('click', function() {
    var colorFilter = $('#colour').text();
    var itemFilter = $('#items').text(); 

    featureList.filter(function(item) {
        return 
            (colorFilter==='All packages' || item.values().colour === colorFilter) 
            && (itemFilter==='All items' || item.values().item === itemFilter);
    });

    return false;
});

只有在为颜色或项目下拉列表选择了一个值时，您才希望通过应用过滤器来充实它。

编辑：这是一个带有一些 console.log() 调用的版本，可以帮助您弄清楚为什么它只在您使用 || 时才有效。(OR) 而不是 && (AND)：

$('#filter-clothes').on('click', function() {
    var colorFilter = $('#colour').text();
    var itemFilter = $('#items').text(); 

    console.log('colorFilter: ' + colorFilter);
    console.log('itemFilter : ' + itemFilter);
    console.log('Applying filter now...');

    featureList.filter(function(item) {
        console.log('Running filter() on item: ('+item+')');
        console.log('item.values().colour: ' + item.values().colour);
        console.log('item.values().item: ' + item.values().item);

        return 
            (colorFilter==='All packages' || item.values().colour === colorFilter) 
            && (itemFilter==='All items' || item.values().item === itemFilter);
    });

    return false;
});
于 2012-12-29T20:46:26.563 回答
1

在没有看到 html 或其他功能的情况下，values()您可能希望从选择标签中获取当前值

$('#filter-clothes').click(function() {
       var color=$('#colour').val(), itemVal=$('#items').val();
         /* not sure what you expect "item" to be, is index but used your same code*/  
        featureList.filter(function(item) {
           /* not sure what XXX property is for items*/
            return item.values().colour == color && tem.values().XXXXX==itemVal; 

        });
        return false;
    });
于 2012-12-29T20:42:51.047 回答
0

这篇文章对我帮助很大，所以我想我会在这里添加它，以防其他人尝试做我所拥有的。

首先是 list.js 的 JS：

/*
* Filtering
*/
var options = {
  valueNames: ['name','phone','status','street','tier','type','zip','zone'],
  plugins: [
    ['fuzzySearch']
  ]
}
var featureList = new List('directory-list', options)

$('.search-fuzzy').keyup(function(){
  featureList.fuzzySearch($(this).val());
});

$('#filter-select').on('click', 'a.filters', function(e){
  if(this.id == 'filter-type-any' || this.id == 'filter-status-any' || this.id == 'filter-zone-any'){
    $(this).addClass('active').parent().siblings().children().removeClass('active')
  } else {
    $(this).toggleClass('active')
    $(this).parent().parent().find('.any').removeClass('active')
  }
  var activeFilters = []
  $('#filter-select').find('a.active').each(function(i) {
    if (this.getAttribute('data-match')){
      activeFilters.push(this.getAttribute('data-match'))
      }
    })
  if(activeFilters.length) {
    var anyType   = (($.inArray('resident', activeFilters) + $.inArray('business', activeFilters) + $.inArray('school', activeFilters)) == -3) ? true : false;
    var anyStatus = (($.inArray('current', activeFilters)  + $.inArray('expiring', activeFilters) + $.inArray('expired', activeFilters) + $.inArray('never', activeFilters)) == -4) ? true : false;
    var anyZone   = (($.inArray('zone1', activeFilters) + $.inArray('zone2', activeFilters) + $.inArray('zone3', activeFilters) + $.inArray('zone4', activeFilters) + $.inArray('zone5', activeFilters) + $.inArray('zone6', activeFilters) + $.inArray('zone7', activeFilters) + $.inArray('zone8', activeFilters)) == -8) ? true : false;
    featureList.filter(function(item) {
      if (
        ( anyType || ($.inArray(item.values().type.toLowerCase(), activeFilters) > -1) )
        &&
        ( anyStatus || ($.inArray(item.values().status.toLowerCase(), activeFilters) > -1) )
        &&
        ( anyZone || ($.inArray(item.values().zone.toLowerCase(), activeFilters) > -1) ) )
      {
        return true;
      } else {
        return false;
      }
    })
  } else {
    featureList.filter()
  }
})

目录过滤器控件

#directory-filters
  .row-fluid
    input.search-fuzzy(placeholder='Search')
  #filter-select.row-fluid
    .span6
      h5 Type
      ul#filter-type
        li
          a#filter-type-any.filters.any.active(href='#') All Entries
        li
          a#filter-type-people.filters(href='#', data-match='resident') People
        li
          a#filter-type-business.filters(href='#', data-match='business') Business
        li
          a#filter-type-schools.filters(href='#', data-match='school') Schools
      br
      h5 Status
      ul#filter-status
        li
          a#filter-status-any.filters.any.active(href='#') Any Status
        li
          a#filter-status-member.filters(href='#', data-match='current') Members
        li
          a#filter-status-expiring.filters(href='#', data-match='expiring') Expiring
        li
          a#filter-status-expired.filters(href='#', data-match='expired') Expired
        li
          a#filter-status-never.filters(href='#', data-match='never') Never Member
    .span6
      h5 Zone
      ul#filter-zone
        li
          a#filter-zone-any.filters.any.active(href='#') All Zones
        li
          a#filter-zone-1.filters(href='#', data-match='zone1') Zone 1
        li
          a#filter-zone-2.filters(href='#', data-match='zone2') Zone 2
        li
          a#filter-zone-3.filters(href='#', data-match='zone3') Zone 3
        li
          a#filter-zone-4.filters(href='#', data-match='zone4') Zone 4
        li
          a#filter-zone-5.filters(href='#', data-match='zone5') Zone 5
        li
          a#filter-zone-6.filters(href='#', data-match='zone6') Zone 6
        li
          a#filter-zone-7.filters(href='#', data-match='zone7') Zone 7
        li
          a#filter-zone-8.filters(href='#', data-match='zone8') Zone 8
于 2013-03-28T18:26:22.510 回答
0

这会做到：

$('#filter-clothes').click(function() {
    featureList.filter(function(item) {
        var colour = $("#colour").text();
        var items = $("#items").text();
        if (item.values().colour == colour && item.values().items == items) {
            return true;
        } else {
            return false;
        }
    });
    return false;
});

只需确保颜色和项目在过滤器选项中

var options = { valueNames: [ 'colour', 'listT items ype' ] };
var featureList = new List('viewList', options);
于 2014-01-25T21:57:53.170 回答