jquery - 静的ページで JQuery を使用したカテゴリ メニュー

Question

これが私のケースです：

左側にサイド メニューがあり、メイン ラッパーにカテゴリのリストとタイルのリストがあり、ユーザーが選択したカテゴリに応じてフィルタリングされるクラシック レイアウトを構築しています。

現在、ページは静的サイトであるため、すべてのコンテンツが既にそこにあり (Json、AJAX などの凝ったものは必要ありません)、各「タイル」には複数のカテゴリを関連付けることができるため、単純な Jquery スクリプトでうまくいくと思います。そうは言っても、私は JQuery に関してはまったく無知であり、私のコードは非常にうまく機能しますが、あまり最適化されていないと感じています。

誰か手を貸してくれませんか？本当に感謝しています。

これがフィドルです： 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>

どうもありがとうございました！