У меня есть галерея с картинками и список с категориями (ul
-список). Как можно реализовать показ конкретных картинок при нажатии на конкретную категорию? И, соответственно, чтобы другие картинки скрывались.
-
1ru.stackoverflow.com/q/826549/256824– user25682427 июл 2019 в 9:50
Добавить комментарий
|
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>
будет иметь этот класс.
-
-
2@meine Я бы не стала выводить на одной странице галерею в миллион картинок, это как минимум безжалостно по отношению к пользователю :) И я бы использовала какую-то либу, например, jQuery. Но раз автор вопроса не указал конкретную либу в тэгах или теле вопроса, то имеем, что имеем. Если у вас есть альтернативное решение на чистом JS, пожалуйста, разместите его в ответе или комментарии. 27 июл 2019 в 10:41
-
2Пожалуйста, воздержитесь отвечать на низкокачественные вопросы, где задача топикастера не совсемм понятна. Вопрос будет повидимому скоро закрыт и будет жалко времени потраченого на ответ.– 0xdb27 июл 2019 в 10:47
-
-
@РустамГимранов, не имеет смысла отвечать на вопрос. т.к. он будет закрыт. Читайте комментарий выше.– meine27 июл 2019 в 11:45