时间戳

首页 > 解决方案 > 通知通过 list.js 过滤的项目数

javascript - 通知通过 list.js 过滤的项目数

问题描述

我首先说我不是开发人员，但我了解 JS 的最低限度......但是我无法解决在我看来似乎很简单的事情（我认为是）。

使用List.js，我能够配置过滤器以过滤 guide-wcag.com/en/ 中的特定项目。当没有找到任何内容时，我能够配置错误消息，我也能够配置一些关键字和复选框。 ..

但我也想包括过滤项目的数量（应该出现一条消息，指示数量，因为这有助于那些没有看到内容并使用屏幕阅读器的人，例如），但我无法做到全部。. :(

带有项目数的消息应该出现在没有找到时出现消息的相同位置。

我将在这里留下我使用的 JS 的摘录（我再说一遍，我不是 JS 专家，对任何错误的语法表示抱歉）。

谢谢

var options = {
    valueNames: [ 'ribbon', 'cards-title', 'cards-content', 'principio', 'recomendacao', 'niveis', 'keywords-cards', 'keywords-all' ]
  };

  var listaCards = new List('cards-filter', options);
  var activeFilters = [];
  var noItems = $('<li class="no-results text-center text-destaque-alert" role="alert">No criteria found. Filter again.</li>');

  $('.filter').change(function() {
    var isChecked = this.checked;
    var value = $(this).data("value");

    if(isChecked) {
      activeFilters.push(value);
    } else {
      activeFilters.splice(activeFilters.indexOf(value), 1);
    }

    listaCards.filter(function (item) {
      if(activeFilters.length > 0) {
      return(activeFilters.indexOf(item.values().niveis)) > -1;
    } return true; });

  });

  listaCards.on('updated', function(list) {
    if (list.matchingItems.length == 0) {
      $(list.list).append(noItems);
    } else {
      noItems.detach();
    }
  });

标签： javascriptjqueryfilteringaccessibilitylist.js

解决方案

使用基本示例，我从最后一个示例开始并修改了您的消息元素。

var foundMessage = list => `Showing: ${list.matchingItems.length}/${list.size()}`;
var notFoundMessage = 'No criteria found. Filter again.';

var $message = $('<p>').addClass('message').attr('role', 'alert');

var options = {
  valueNames: ['name', 'born'],
  item: '<li><h3 class="name"></h3><p class="born"></p></li>'
};

var values = [
  { name: 'Jonny Strömberg' , born: 1986 },
  { name: 'Jonas Arnklint'  , born: 1985 },
  { name: 'Martina Elm'     , born: 1986 }
];

var userList = new List('cards-filter', options, values);

userList.add({ name: 'Gustaf Lindqvist', born: 1983 });

userList.on('updated', function(list) {
  if ($('.search').val().trim().length > 0) {
    if (list.matchingItems.length == 0) {
      $message.text(notFoundMessage);
    } else {
      $message.text(foundMessage(list));
    }
    $(list.list).prepend($message);
  }
});
.message { color: #555; font-style: italic; font-size: smaller; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.0.2/list.min.js"></script>
<div id="cards-filter">
  <input class="search" placeholder="Search" />
  <button class="sort" data-sort="name">
    Sort
  </button>
  <ul class="list"></ul>
</div>

推荐阅读