-3

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

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

5
  • Можно сделать так, чтобы при нажатии на "телефоны" выводились только телефоны, а при нажатии на "Телфоны-планшеты" выводились и телефоны, и планшеты. Если серьезно, то в мире магии нет, чтобы хоть как-то помочь, покажите хоть что-то (!!!!!!), что у вас сейчас есть. 3 фев 2018 в 15:24
  • @Alexxosipov, я спросил реально ли это с помощью JS реализовать
    – uzi_no_uzi
    3 фев 2018 в 15:27
  • Да, реально. Только вы спросили "Как можно реализовать?" (см. ваш вопрос). Я и ответил. 3 фев 2018 в 15:28
  • Более чем реально, если у вас фронт написан на реакте или вью
    – DiDex
    3 фев 2018 в 15:31
  • @DiDex на ванильном/jquery тоже спокойно делается же 3 фев 2018 в 15:33

1 ответ 1

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>

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.