Javascript I'；I’我想加一个；“全部显示”；“我的过滤器”选项的按钮，用于删除所有选中的项目并显示我的容器中的所有项目

我在我的网站上设置了一个同位素功能来分类和过滤各种项目。这些函数工作得很好，只是我不知道如何添加一个“ShowAll”按钮来重置过滤器并显示页面上的所有项目

下面是如何设置我的JS文件：

// Grab the .policies container
var $container = $('.policies');

var $policies = $($container).isotope({
    // options
    itemSelector: '.policy',
    layoutMode: 'masonry',

    getSortData: {
      name: 'h2'
    }
});


// Sort based on various factors
$('.sort').on('click', function() {
    if ( $(this).hasClass('checked')) {
        $(this).removeClass('checked');
        $container.isotope({ sortBy: 'original-order' } );
    } else {
        $('.sort').removeClass('checked');
        var sortValue = $(this).attr('data-sort-value');
        $container.isotope({ sortBy: sortValue });
        $(this).addClass('checked');
    }
});

// Array to store filter from each group.
  var filters = {};

  $('.filter-list a').on('click', function() {
      // Get navigation group (subject or author) as object.
      var $navGroup = $(this).parents('.filter-list');
      // Get data-filter-group attribute for current nav group.
      var filterGroup = $navGroup.attr('data-filter-group');

      // If button is already active (checked):
      if ( $(this).hasClass('checked')) {
          $(this).removeClass('checked');
          // Reset array entry with filterGroup as key.
          filters[ filterGroup ] = '*';
      } else {
          // Find any checked buttons in the current filter group
          // and remove .checked class.
          $navGroup.find('a').removeClass('checked');
          // Set array entry with filterGroup as key to current data-filter value.
          filters[ filterGroup ] = $(this).attr('data-filter');
          $(this).addClass('checked');
      }
      // Grab concatenated filter values via concatenateValues function.
      var filterValue = concatenateValues( filters );
      // Run the filter.
      $container.isotope({ filter: filterValue });
  });



  // Concatenate values from array to a single string.
  function concatenateValues( object ) {
      var values = "";
      for ( var value in object ) {
          values += object[value];
      }
      return values;
  }

});

以下是我的按钮的设置方式：

<div class="usa-media-block tablet:grid-col-3">
  <nav id="filter" class="filters">
    <ul class="global-controls">
            <li><a href="javascript:void(0)" class="sort" data-sort-value="name">Sort alphabetically by title</a></li>
      </ul>
      <h5 class="filter-title">Filter by Category</h5>
      <ul class="filter-list" data-filter-group="subject">
          <li><a href="javascript:void(0)" data-filter=".category-1">Category 1</a></li>
          <li><a href="javascript:void(0)" data-filter=".category-2">Category 2</a></li>
      </ul>
      <h5 class="filter-title">Filter by Role</h5>
      <ul class="filter-list" data-filter-group="role">
          <li><a href="javascript:void(0)" data-filter=".role-1">Role 1</a></li>
          <li><a href="javascript:void(0)" data-filter=".role-2">Role 2</a></li>
      </ul>
      <h5 class="filter-title">Filter by Status</h5>
      <ul class="filter-list" data-filter-group="status">
          <li><a href="javascript:void(0)" data-filter=".active">Active</a></li>
          <li><a href="javascript:void(0)" data-filter=".closed">Closed</a></li>
      </ul>
  </nav>
</div>

按类别筛选




按角色筛选




按状态筛选

同位素metafizzy网站有一些关于如何实现这一点的资源，但他们通过将每个过滤器选项绑定到一个按钮，以不同的方式设置过滤器。见下文：

<div class="button-group" data-filter-group="color">
  <button data-filter="">any</button>
  <button data-filter=".red">red</button>
  <button data-filter=".blue">blue</button>
  <button data-filter=".yellow">yellow</button>
</div>

任何
红色
蓝色
黄色的

我的代码允许更大的灵活性，但我无法让“*”显示所有选项