Используя только javascript и css: могу ли я позволить пользователю выборочно отображать и скрывать div разных классов с помощью одного раскрывающегося меню?
У меня есть html-страница, состоящая из 80-100 элементов div в стиле css, каждый из которых содержит сетку с изображением и информацией об одном произведении искусства. (Каждый элемент div уже имеет уникальный идентификатор, чтобы обеспечить возможность ссылки на определенное место на странице.)
Во многих работах используется несколько носителей, и я хочу, чтобы пользователь мог сделать видимыми только произведения искусства, использующие определенные носители.
Другими словами, я хочу, чтобы html-страница вела себя как фильтруемая база данных, где одно раскрывающееся меню действует как список фильтров, а нажатие на опцию «произведения с использованием видео» (например,) скрывает все работы, которые делают не использовать видео.
Я хочу добиться вышеуказанного только с помощью css и Javascript.
Как я понимаю:
Я могу сделать свои графические элементы доступными для выбора, назначив различные классы, такие как «.med-drawing», «.med-video», «.med-sound» и т. д. Этих классов должно быть 10-12.
Затем мне понадобится способ, onClick, чтобы «сделать видимыми все элементы div, которые имеют» определенный класс, и «сделать невидимыми элементы div, у которых нет» этого класса. Это для каждого из 10 - 12 различных классов.
Я пробовал серию функций Javascript «onClick + GetElementsByClass + [некоторый контроль видимости]», назначенных различным элементам в меню. У меня ограниченные знания в области кодирования javascript, и пока я ничего не могу заставить работать.
Что мне действительно нужно, так это простое решение javascript/css, которое я могу изменить в соответствии с моим проектом.
Буду благодарен за любую помощь.
РЕДАКТИРОВАТЬ - 1 день спустя (код добавлен ниже этих пунктов):
С помощью the.marolie у меня теперь есть базовый «фильтр/селектор», работающий на тестовой странице. Он может выбирать и отображать/скрывать div именно так, как я хотел, хотя и использует «тип данных», а не класс.
Спасибо!
РЕДАКТИРОВАТЬ 2
Я добавил больше к этому сообщению, но, поразмыслив, понял, что на мой первоначальный вопрос прекрасно ответила the.marolie. Мой дополнительный материал действительно представлял собой другой вопрос, поэтому я удалил его здесь и перенес в новый пост: Используя только JS и css: могу ли я реализовать фильтр, чтобы: щелчок/нажатие в раскрывающемся списке JS меню показывает/скрывает разделы страниц в соответствии с типом данных?
Заголовок поста - это конкретный вопрос. Если ответ на него «да», это было бы полезно знать. Если ответ «нет», то я буду знать, что не стоит тратить время на попытки решить проблему способом, который я четко указал в качестве своего предпочтения. Ни один из ответов не потребует написания кода. Я указал специфику ре. мое ограниченное понимание того, как подойти к моей проблеме. Было бы полезно знать, на правильном ли я пути. Такой ответ не обязательно должен включать какой-либо код, но он может указать мне направление полезного ресурса, где я мог бы изучить достаточно кода для решения моей проблемы.
Если вы говорите об атрибуте класса HTML, то ответ положительный, и чтобы найти все произведения искусства в классе, вы можете использовать document.querySelectorAll. Выполните поиск в MDN, который является надежным источником.
Вы сказали, что ничего не можете заставить работать; что ты пробовал? Включите свой код в свой пост, и мы можем пойти оттуда. Открытые вопросы здесь не работают.
Вы должны сначала попробовать то, что хотите, и если у вас возникнут ПРОБЛЕМЫ, вы можете опубликовать свой вопрос на StackOverflow. Однако StackOverflow НЕ является веб-сайтом службы кодирования.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Для начала один из подходов:
Добавьте общее имя класса и атрибут data в каждый div в зависимости от типа содержимого. Например:
<div class = "grid-item" data-type = "text">
<span>Text</span>
</div>
<div class = "grid-item" data-type = "audio">
<span>Audio</span>
</div>
Получив это, вы можете добавить поле выбора, которое будет содержать параметр со значениями, такими же, как у data-type. Нравиться:
<select id = "cstm-select" name = "filter">
<option value = "text">Text</option>
<option value = "image">Image</option>
<option value = "audio">Audio</option>
<option value = "video">Video</option>
</select>
Если вы видите приведенный выше код, опция value of содержит разные значения атрибутов data-type, которые мы будем использовать для фильтрации контента.
Теперь для логики js: сначала нам нужно прослушать событие onChange нашего элемента select, сохранить выбранное значение в переменной, а затем запросить элементы, как только использование выберет параметр с помощью функции document.querySelectorAll(), и передать общее имя класса в качестве параметр функции, чтобы были выбраны только те элементы, которые нам нужно отфильтровать.
После запроса мы можем просмотреть каждый элемент, используя forEach, затем проверить, соответствует ли атрибут data-type каждого элемента выбранному значению фильтра, и, если он не соответствует, добавить имя класса к элементу, который будет контролировать видимость элемента.
Кроме того, нам нужно убедиться, что если data-type совпадает, мы удаляем имя класса, чтобы элемент был виден, когда пользователь выбирает другой фильтр.
Сочетая это, вот небольшая рабочий пример. Измените код в соответствии с требованиями вашего проекта.
var select = document.getElementById('cstm-select');
var filter;
select.addEventListener("change", function() {
filter = select.value;
var elements = document.querySelectorAll('.grid-item');
elements.forEach((el) => {
var type = el.dataset.type.split(' ');
if (type.includes(filter)) {
el.classList.remove('hidden');
} else {
el.classList.add('hidden');
}
})
});.hidden {
display: none;
}<select id = "cstm-select" name = "filter">
<option value = "text">Text</option>
<option value = "image">Image</option>
<option value = "audio">Audio</option>
<option value = "video">Video</option>
</select>
<div class = "grid-container">
<div class = "grid-item" data-type = "text">
<span>Text</span>
</div>
<div class = "grid-item" data-type = "audio video">
<span>Audio / Video</span>
</div>
<div class = "grid-item" data-type = "video">
<span>Video</span>
</div>
<div class = "grid-item" data-type = "audio">
<span>Audio</span>
</div>
<div class = "grid-item" data-type = "image">
<span>Image</span>
</div>
<div class = "grid-item" data-type = "text">
<span>Text</span>
</div>
<div class = "grid-item" data-type = "text">
<span>Text</span>
</div>
</div>Обновлено: в соответствии с вашим комментарием я изменил код, чтобы включить функциональность фильтра, если для одного data-type определено несколько grid-item.
Логическое изменение здесь заключается в том, что мы определяем кратное data-type так: data-type = "audio video". Обеспечьте пробел между каждым элементом или вы также можете использовать разделитель запятой.
И в коде js мы сначала разделяем data-type с помощью функции str.split(), которая хранит значения в массиве, таком как ['audio', 'video'].
Теперь, когда у нас это есть, все, что нам нужно сделать, это проверить, включен ли выбранный фильтр в массив набора данных, и применить или удалить класс по мере необходимости. Проверьте измененный jsfiddle.
Примечание. Какой бы разделитель мы ни использовали в атрибуте data-type, нам нужно определить тот же разделитель в коде js, пока мы разделяем.
Если мы используем запятую, то в js это будет:
var type = el.dataset.type.split(',');
Большое спасибо, the.marolie, за такой щедрый ответ, с большим количеством полезной информации, а также с фактическим кодом, с которого можно начать. Я поработаю над этим, попытаюсь понять и адаптировать его, как вы предлагаете, и опубликую здесь через день или около того.
Я реализовал ваше предложение простым способом, на уменьшенной тестовой странице. Сразу возникает несколько вопросов. Вот самое основное (используя ваши термины): многие из моих div должны выбираться в соответствии с одним из возможных «типов данных». Есть ли способ назначить несколько типов данных одному div таким образом, чтобы ваш фильтр cstm-select по-прежнему выбирал только один тип данных, назначенный последней опции cstm-select)?
@DrNoKnow, мы можем это сделать. Я обновил ответ с объяснением.
Ух ты. Еще раз спасибо. Только что взял ваш мод и буду пробовать сразу.
Без проблем. Дайте мне знать, если это сработает
Мод отлично работал... в изоляции. Теперь я пытаюсь интегрировать фильтр/селектор the.marolie с моим существующим выпадающим меню! Где-то там!? Смотрите мой большой пост РЕДАКТИРОВАТЬ...
Я зачислил ваши ответы как «ответ». Они действительно были очень информативными и полезными, помогая мне добавить жизненно важный элемент интерактивности в мой проект. СПАСИБО!
Добро пожаловать в СО! SO не является службой кодирования, поэтому ожидается, что вы сделаете попытку, а затем мы сможем помочь с конкретными проблемами. У вас есть конкретный вопрос о том, как достичь своей цели?