使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>

联署材料：

<!-- 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>

你可以看到发生了什么，这里。基本上，当我按下“詹姆斯”按钮时，什么都不会发生。我在StackOverflow搜索了一个答案，但我无法让它开始工作。

我最终希望有一个下拉菜单与所有的教训系列，供人们过滤。但是仅仅是得到这个应该就能教会我足够多的关于list.js的知识来让它开始工作。

Answer 1

使用类filter-series设置按钮。但你用的是身份证选择器。

正确的选择是：

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

Answer 2

Chrome调试器( Chrome中的F12，如果您不知道如何实现)告诉您这个问题：

未登录的SyntaxError:意外令牌}

你有一个太多的结尾人物：

});

试试这个：

<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>