Как сделать сортировку при помощи JS? [дубликат]

182

05 февраля 2018, 03:31

На данный вопрос уже ответили:

Как написать компаратор для сортировки? 1 ответ

Можно ли при помощи JS реализовать такое: Есть на странице несколько блоков, допустим это товар в интернет магазине. И нужно сделать сортировку, есть три категории, Телефоны, Планшеты, Телефоны-планшеты, Нужно что бы при нажатии на "Телефоны" выводились только блоки с телефонами, а при нажатии например на "Телефоны-планшеты" выводились и телефоны и планшеты. Как можно реализовать?

Т.е. один товар может находится в нескольких категориях.

Answer 1

Пример кода:

var content = $('.content'); 
 
$('button[data-filter]').on('click', (e)=> 
{ 
  var filter = $(e.currentTarget).attr('data-filter'); 
  $('li', content).show(); 
  if (filter) $('li:not(.' + filter.split(' ').join(', .') + ')', content).hide() 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="filters"> 
  <button data-filter="phone">Телефоны</button> 
  <button data-filter="tab">Планшеты</button> 
  <button data-filter="phone tab">Телефоны и планшеты</button> 
</div> 
<ul class="content"> 
  <li class="product phone">Телефон</li> 
  <li class="product phone">Телефон</li> 
  <li class="product tab">Планшет</li> 
  <li class="product phone tab">Планшет и телефон</li> 
  <li class="product tab">Планшет</li> 
  <li class="product tab phone">Планшет и телефон</li> 
  <li class="product phone">Телефон</li> 
  <li class="product tab">Планшет</li> 
  <li class="product tab">Планшет</li> 
  <li class="product phone">Телефон</li> 
</ul>