使 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" 按钮时，没有任何反应。我搜索了 Whosebug 寻找答案，但我无法让它工作。

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

Answer 1

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 2

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

正确的选择器是：

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

Answer 3

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

我有：

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

但该函数试图匹配出现在标签之间的 "James to what showed up between the h4 tags. But I had, e.g. "James（布道）。

所以我不得不将其更改为：

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

现在可以了！

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

Getting list.js filter function to work

html

javascript

jquery

web

list.js