Javascript List.js：如何添加过滤器

我正在尝试修改list.js脚本（），但无法在列表上设置过滤器

我想创建一个只显示“1986”项目的过滤器（通过按钮）

你能帮我吗

 <div id="users">
  <input class="search" placeholder="Search" />
  <button class="sort" data-sort="name">
    Sort by name
  </button>

  <ul class="list">
    <li>
      <h3 class="name">Jonny Stromberg</h3>
      <p class="born">1986</p>
    </li>
    <li>
      <h3 class="name">Jonas Arnklint</h3>
      <p class="born">1985</p>
    </li>
    <li>
      <h3 class="name">Martina Elm</h3>
      <p class="born">1986</p>
    </li>
    <li>
      <h3 class="name">Gustaf Lindqvist</h3>
      <p class="born">1983</p>
    </li>
  </ul>

</div>
<script src="http://listjs.com/no-cdn/list.js"></script>
<script>
 var options = {
  valueNames: [ 'name', 'born' ]
 };

 var userList = new List('users', options)
</script>

按名称排序


乔尼·斯特隆伯格
1986年



乔纳斯·阿恩克林特
1985年


玛蒂娜·埃尔姆
1986年



古斯塔夫·林克维斯特
1983年


变量选项={
valueNames:['name'，'born']
};
var userList=新列表（“用户”，选项）

这里有一个解决方案，可以通过按下按钮来过滤1986。Javascript使用标签（即文本）进行过滤。您还可以在按钮上添加用于筛选的属性

$('.filter-1986').on('click',function(){
  var $text = $(this).text();
  if($(this).hasClass( 'selected' )){
    userList.filter();
    $(this).removeClass('selected');
  } else {
    userList.filter(function(item) {
      return (item.values().born == $text);
    });
    $(this).addClass('selected');
  }
});

你可以在这里试试。

var选项={
valueNames:['name'，'born']
};
var userList=新列表（“用户”，选项）；
$（'.filter-1986'）。在（'click'，function（）上{
var$text=$（this.text（）；
if（$（this）.hasClass（'selected'））{
userList.filter（）；
$（this.removeClass（'selected'）；
}否则{
userList.filter（函数（项）{
返回（item.values（）.born==$text）；
});
$（this.addClass（'selected'）；
}
});
.list{
字体系列：无衬线；
保证金：0；
填充：20px0；
}
.list>li{
显示：块；
背景色：#eee；
填充：10px；
长方体阴影：插入0 1px 0#fff；
}
.阿凡达{
最大宽度：150px；
}
img{
最大宽度：100%；
}
h3{
字体大小：16px；
保证金：0.3雷姆；
字体大小：正常；
字体大小：粗体；
}
p{
保证金：0；
}
输入{
边框：实心1px#ccc；
边界半径：5px；
填充：7px 14px；
边际下限：10px
}
输入：焦点{
大纲：无；
边框颜色：#aaa；
}
钮扣{
填充：8px 30px；
边界半径：6px；
边界：无；
显示：内联块；
颜色：#fff；
文字装饰：无；
背景色：#28a8e0；
高度：30px；
}
.选定{
背景色：#1b8aba；
}
按钮：悬停{
文字装饰：无；
背景色：#1b8aba；
}
按钮：焦点{
大纲：无；
}
按钮：之后{
宽度：0；
身高：0；
左边框：5px实心透明；
右边框：5px实心透明；
边框底部：5px实心透明；
内容：“；
位置：相对位置；
顶部：-10px；
右：-5px；
}
.sort.asc:之后{
宽度：0；
身高：0；
左边框：5px实心透明；
右边框：5px实心透明；
边框顶部：5px实心#fff；
内容：“；
位置：相对位置；
顶部：13px；
右：-5px；
}
.分类.描述：之后{
宽度：0；
身高：0；
左边框：5px实心透明；
右边框：5px实心透明；
边框底部：5px实心#fff；
内容：“；
位置：相对位置；
顶部：-10px；
右：-5px；
}

按名称排序
1986


乔尼·斯特隆伯格
1986年



乔纳斯·阿恩克林特
1985年


玛蒂娜·埃尔姆
1986年



古斯塔夫·林克维斯特
1983年