0

У меня есть галерея с картинками и список с категориями (ul-список). Как можно реализовать показ конкретных картинок при нажатии на конкретную категорию? И, соответственно, чтобы другие картинки скрывались.

1

1 ответ 1

1

Поскольку вы не приложили ваш текущий код и указали только тэг javascript, предположу, что вам нужно на чистом js. Решение:

var li_items = document.querySelectorAll('li');
var gallery_items = document.querySelectorAll('.gallery-item');

for (i = 0; i < li_items.length; i++) {
  li_items[i].addEventListener('click', function() {
    var category_id = this.getAttribute('data-category');
    for (j = 0; j < gallery_items.length; j++) {
      if (gallery_items[j].getAttribute('data-category') !== category_id) {
        gallery_items[j].style.display = "none";
      } else {
        gallery_items[j].style.display = "block"; // или inline или другое, смотря как у вас в вёрстке
      }
    }
  });
}
Выберите категорию:
<ul>
  <li data-category="1">Категория 1</li>
  <li data-category="2">Категория 2</li>
  <li data-category="3">Категория 3</li>
</ul>
<div>
  <div class="gallery-item" data-category="1">Картинка 1</div>
  <div class="gallery-item" data-category="2">Картинка 2</div>
  <div class="gallery-item" data-category="3">Картинка 3</div>
  <div class="gallery-item" data-category="1">Картинка 4</div>
  <div class="gallery-item" data-category="2">Картинка 5</div>
  <div class="gallery-item" data-category="2">Картинка 6</div>
  <div class="gallery-item" data-category="1">Картинка 7</div>
  <div class="gallery-item" data-category="2">Картинка 8</div>
  <div class="gallery-item" data-category="3">Картинка 9</div>
</div>

Внутри каждого div.gallery-item и будет <img>, или сам <img> будет иметь этот класс.

6
  • есл таких элементов будет 1миллион, тоже будете for'ом перебирать?)
    – meine
    27 июл 2019 в 10:20
  • 2
    @meine Я бы не стала выводить на одной странице галерею в миллион картинок, это как минимум безжалостно по отношению к пользователю :) И я бы использовала какую-то либу, например, jQuery. Но раз автор вопроса не указал конкретную либу в тэгах или теле вопроса, то имеем, что имеем. Если у вас есть альтернативное решение на чистом JS, пожалуйста, разместите его в ответе или комментарии. 27 июл 2019 в 10:41
  • 2
    Пожалуйста, воздержитесь отвечать на низкокачественные вопросы, где задача топикастера не совсемм понятна. Вопрос будет повидимому скоро закрыт и будет жалко времени потраченого на ответ.
    – 0xdb
    27 июл 2019 в 10:47
  • @РустамГимранов Верно. Подняла выше 27 июл 2019 в 11:24
  • @РустамГимранов, не имеет смысла отвечать на вопрос. т.к. он будет закрыт. Читайте комментарий выше.
    – meine
    27 июл 2019 в 11:45

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