在静态页面上使用 JQuery 的类别菜单

Question

这是我的案例：

我正在构建一个经典布局，左侧有一个侧边菜单，其中包含类别列表和主包装上的图块列表，这些列表根据用户选择的类别进行过滤。

现在，该页面是一个静态站点，因此所有内容都已经存在（不需要 Json、AJAX 或任何花哨的内容）并且每个 "tile" 可以有多个附加类别，所以我认为一个简单的 Jquery 脚本应该可以解决问题。话虽如此，当谈到 JQuery 时我还是很无能为力，尽管我的代码工作得很好，但我觉得它不是很优化。

有人可以伸出援手并教我一些东西吗？非常感谢。

这是 fiddle： https://jsfiddle.net/6hmnk5od/

代码如下：

JS

$(document).ready(function() {

  // Reset
  $('.cat-tree-reset').click(function() {
    $('.cat-active').removeClass('cat-active');
    $('.tiles-list').children('.tile-item').show();
  });

  // Show/hide projects
  $('.cat-1').click(function() {
    $('.cat-active').removeClass('cat-active');
    $(this).addClass('cat-active');
    $('.tiles-list').children('li.tile-item, :not(.cat-1-item)').hide();
    $('.tiles-list').children('.cat-1-item').show();
  });

  $('.cat-2').click(function() {
    $('.cat-active').removeClass('cat-active');
    $(this).addClass('cat-active');
    $('.tiles-list').children('li.tile-item, :not(.cat-2-item)').hide();
    $('.tiles-list').children('.cat-2-item').show();
  });

  $('.cat-3').click(function() {
    $('.cat-active').removeClass('cat-active');
    $(this).addClass('cat-active');
    $('.tiles-list').children('li.tile-item, :not(.cat-3-item)').hide();
    $('.tiles-list').children('.cat-3-item').show();
  });

  $('.cat-4').click(function() {
    $('.cat-active').removeClass('cat-active');
    $(this).addClass('cat-active');
    $('.tiles-list').children('li.tile-item, :not(.cat-4-item)').hide();
    $('.tiles-list').children('.cat-4-item').show();
  });

  $('.cat-5').click(function() {
    $('.cat-active').removeClass('cat-active');
    $(this).addClass('cat-active');
    $('.tiles-list').children('li.tile-item, :not(.cat-5-item)').hide();
    $('.tiles-list').children('.cat-5-item').show();
  });

  $('.cat-6').click(function() {
    $('.cat-active').removeClass('cat-active');
    $(this).addClass('cat-active');
    $('.tiles-list').children('li.tile-item, :not(.cat-6-item)').hide();
    $('.tiles-list').children('.cat-6-item').show();
  });

  $('.cat-7').click(function() {
    $('.cat-active').removeClass('cat-active');
    $(this).addClass('cat-active');
    $('.tiles-list').children('li.tile-item, :not(.cat-7-item)').hide();
    $('.tiles-list').children('.cat-7-item').show();
  });

  $('.cat-8').click(function() {
    $('.cat-active').removeClass('cat-active');
    $(this).addClass('cat-active');
    $('.tiles-list').children('li.tile-item, :not(.cat-8-item)').hide();
    $('.tiles-list').children('.cat-8-item').show();
  });

});

HTML

<div class="categories-list">
  <label>Categories</label>

  <div class="cat-tree-reset">Clear</div>

  <ul class="cat-tree-wrapper">
    <li>
      <span class="cat-tree-item cat-1">Category 1</span>
    </li>
    <li>
      <span class="cat-tree-item cat-2">Category 2</span>
    </li>
    <li>
      <span class="cat-tree-item cat-3">Category 3</span>
    </li>
    <li>
      <span class="cat-tree-item cat-4">Category 4</span>
    </li>
    <li>
      <span class="cat-tree-item cat-5">Category 5</span>
    </li>
    <li>
      <span class="cat-tree-item cat-6">Category 6</span>
    </li>
    <li>
      <span class="cat-tree-item cat-7">Category 7</span>
    </li>
    <li>
      <span class="cat-tree-item cat-8">Category 8</span>
    </li>
  </ul>
</div>

<hr>


<ul class="row tile-card-wrapper tiles-list" id="container">
  <li class="tile-item cat-3-item cat-7-item cat-2-item">
    Tile A
  </li>
  <li class="cat-2-item tile-item cat-3-item cat-7-item cat-6-item">
    Tile B
  </li>
  <li class="cat-1-item tile-item cat-3-item cat-6-item cat-7-item">
    Tile C
  </li>
  <li class="cat-2-item tile-item cat-7-item">
    Tile D
  </li>
  <li class="tile-item cat-3-item cat-6-item cat-7-item">
    Tile E
  </li>
  <li class="tile-item cat-6-item">
    Tile F
  </li>
  <li class="tile-item cat-5-item">
    Tile G
  </li>
  <li class="tile-item cat-1-item cat-3-item">
    Tile H
  </li>
  <li class="tile-item cat-3-item cat-4-item cat-7-item">
    Tile I
  </li>
  <li class="tile-item cat-3-item cat-6-item cat-7-item">
    Tile J
  </li>
  <li class="tile-item cat-3-item cat-7-item cat-5-item">
    Tile K
  </li>
  <li class="tile-item cat-3-item cat-7-item cat-2-item">
    Tile L
  </li>
  <li class="tile-item cat-3-item cat-6-item cat-7-item">
    Tile M
  </li>
  <li class="tile-item cat-3-item cat-6-item cat-7-item">
    Tile N
  </li>
  <li class="tile-item cat-1-item cat-4-item">
    Tile O
  </li>
  <li class="tile-item cat-3-item cat-7-item cat-8-item">
    Tile P
  </li>
  <li class="tile-item cat-3-item">
    Tile Q
  </li>
  <li class="tile-item cat-3-item cat-1-item">
    Tile R
  </li>
  <li class="tile-item cat-3-item cat-4-item cat-8-item">
    Tile S
  </li>
</ul>

非常感谢！

Answer 1

我们可以大大缩短您的代码并使其更易于维护。

HTML: 我已经删除了很多类，并为每个跨度添加了一个数据属性，data-cat，它只是类别编号。

磁贴项目本身不再有多个类，而是一个包含它们所属类别数组的数据猫属性。

<div class="categories-list" >
<label>Categories</label>

<div class="cat-tree-reset">Clear</div>

<ul class="cat-tree-wrapper">
  <li>
    <span data-cat="1">Category 1</span>
  </li>
  <li>
    <span data-cat="2">Category 2</span>
  </li>
  <li>
    <span data-cat="3">Category 3</span>
  </li>
  <li>
    <span data-cat="4">Category 4</span>
  </li>
  <li>
    <span data-cat="5">Category 5</span>
  </li>
  <li>
    <span data-cat="6">Category 6</span>
  </li>
  <li>
    <span data-cat="7">Category 7</span>
  </li>
  <li>
    <span data-cat="8">Category 8</span>
  </li>
</ul>
</div>

<hr>


<ul class="row tile-card-wrapper tiles-list" id="container">
  <li class="tile-item" data-cats="[2,3,7]">
    Tile A        
  </li>
  <li class="tile-item" data-cats="[2,3,6,7]">
    Tile B
  </li>
  <li class="tile-item" data-cats="[1,3,6,7]">
    Tile C
  </li>
  <li class="tile-item" data-cats="[2,7]">
    Tile D
  </li>
  <li class="tile-item" data-cats="[3,6,7]">
    Tile E
  </li>
  <li class="tile-item" data-cats="[6]">
    Tile F
  </li>
  <li class="tile-item" data-cats="[5]">
    Tile G
  </li>
  <li class="tile-item" data-cats="[3]">
    Tile H
  </li>
  <li class="tile-item" data-cats="[4,8]">
    Tile I
  </li>
</ul>

JavaScript: 我们只是在所有可点击范围上放置一个点击处理程序，并使用它们的新数据猫属性来过滤磁贴项目。

$(document).ready(function () {

  // Reset
  $('.cat-tree-reset').click(function() {
      $('.tile-item').show();
  });

  $('.cat-tree-wrapper > li > span').click(function() {
    //get the data-cat value for the span we clicked on
    var category = $(this).data('cat');

    // hide all tile items
    $('.tile-item').hide();

    // the function passed to filter returns true if the current tile item
    // contains the category we obtained earlier, or false if it doesn't
    // leaving us with only the tile items in that category, which we show.
    $('.tile-item').filter(function() {
        return $(this).data('cats').includes(category);
    }).show();
  });      
});

JSFiddle

在静态页面上使用 JQuery 的类别菜单

Categories menu using JQuery on a static page

html

navigation

jquery

menu

static-html