Категории меню с помощью 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> 

Большое спасибо!

Answer 1

Мы можем сделать ваш код существенно короче и проще в обслуживании.

HTML: Я удалил много классов и добавил один атрибут данных для каждого пролета, data-cat, который является только номером категории.

Элементы элементов плитки больше не имеют нескольких классов, но представляют собой один атрибут data-cats, который содержит массив категорий, к которым они принадлежат.

<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