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会发生什么。基本上，当我击中詹姆斯＆＃34;按钮，没有任何反应。我已经搜索了StackOverflow寻找答案，但我无法让它工作。

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

Answer 1

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>

Answer 2

您可以使用类 filter-series设置按钮。但您使用的是 id 选择器。

正确的选择器是：

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

Answer 3

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

我有：

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

但是这个功能试图将“詹姆斯与h4标签之间的内容相匹配。但我有，例如”James（Sermon）“出现在标签之间。

所以我不得不把它改成：

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

现在有效！

获取list.js过滤功能

3 个答案: