让 list.js 过滤器功能正常工作

Question

我似乎无法让 List.js 过滤器功能工作。作为新手开发者，List.js 的文档还有很多不足之处。

这是我的代码：

HTML：

<div class="col-sm-12" id="lessons">
  <input class="search" placeholder="Search" />
  <button class="filter-series">James</button>
  <ul class="list">
    {% for lesson in lessons %}
    <li>
      <h4 class="date" style="float:right;">{{lesson.date}}</h4>
      <h4 class="series">{{lesson.series}} ({{lesson.lesson_type}})</h4>
      <div style="float:clear;"></div>
        <h3 style="font-size:1.5em; color:#f68026; text-transform:uppercase;" class="title">{{lesson.title}}</h3>
        <p></p>
        <p>{{lesson.info}}</p>
        {% if lesson.url != "" %}
        <audio controls preload="none">
          <source src="{{lesson.url}}" type="audio/mpeg">
            Your browser does not support the audio element.
        </audio>
        {% endif %}
        <p>
        {% if lesson.manuscript != none  %}[<a href="{{lesson.manuscript}}">Manuscript</a>]{% endif %}
        {% if lesson.handout != none %} [<a href="{{lesson.handout}}">Handout</a>]{% endif %}
        {% if lesson.ppt != none %} [<a href="{{lesson.ppt}}">PPT</a>
        {% endif %}
        </p>
    </li>
    {% endfor %}
</ul>
</div>

JS：

<!-- list.js script -->
<script type="text/javascript">
<!--
  var options = {
    valueNames: [ 'series', 'date']
  };

  var featureList = new List('lessons', options);

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

});

//-->
</script>

您可以看到here 会发生什么。基本上，当我按下“James”按钮时，什么也没有发生。我已经搜索 StackOverflow 寻找答案，但我无法让它工作。

我最终希望有一个包含所有课程系列的下拉菜单供人们过滤。但是只要得到这个就应该教会我足够的关于 list.js 的知识来让它工作。

Answer 1

您已使用 class filter-series 设置按钮。但是您使用的是 id 选择器。

正确的选择器是：

$('.filter-series').on('click', function() { ...

Answer 2

Chrome 调试器（如果您不确定如何到达，请在 Chrome 中按 F12）告诉您问题：

Uncaught SyntaxError: Unexpected token }

你的结束字符太多了：

});

试试这个：

<script type="text/javascript">
    <!--
    var options = {
        valueNames: ['series', 'date']
    };

    var featureList = new List('lessons', options);

    $('#filter-series').on('click', function () {
        var $text = $(this).text();
        if ($(this).hasClass('selected')) {
            featureList.filter();
            $(this).removeClass('selected');
        } else {
            featureList.filter(function (item) {
                return (item.values().series == $text);
            });
            $(this).addClass('selected');
        }
    });
    //removed });
    //-->
</script>

Answer 3

在考虑了 nickles80 和 Jason Heine 的回答后，我也遇到了一个问题（两者都是需要且有帮助的）。

我有：

<h4 class="series">{{lesson.series}} ({{lesson.lesson_type}})</h4>

但该函数试图将“詹姆斯”与 h4 标签之间显示的内容进行匹配。但我有，例如“詹姆斯（布道）”出现在标签之间。

所以我不得不把它改成：

      <h4 class="series">{{lesson.series}}</h4>

现在可以了！