告知通过 list.js 筛选的项目数

Question

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

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

但我还想包括过滤项目的数量（应该出现一条消息，指示数量，因为这有助于那些没有看到内容并使用屏幕的人 reader，例如），但我根本做不到。 . :(

带有项目数量的消息应出现在未找到任何消息时出现的同一位置。

我会在这里留下我使用的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();
    }
  });

Answer 1

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

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>

告知通过 list.js 筛选的项目数

Inform the number of items filtered via list.js

javascript

jquery

filtering

accessibility

list.js