Используйте ввод, чтобы скрыть и показать div определенного имени класса и только этого одного класса

У меня есть группа флажков, соответствующих группе изображений. Когда вход проверен, должны появиться только те изображения с соответствующим классом. И не все изображения, которые могут иметь этот класс с другими классами.

Например,

Некоторые изображения имеют классовое облако, в то время как другие могут иметь облако и данные, облако, данные и сеть и так далее. Когда я проверяю облако, должны появляться только изображения с облаком. Когда я проверяю облако и данные, должны отображаться только изображения с облаком и данными.

Это то, что я пытался добавить активный класс к своим флажкам. Эта часть работает, так как мне нужно выделить их

$('.posts-filter input[type=checkbox]').change(function(){
  // Audit all checkboxes on/off state

   let picked = $('.posts-filter input[type=checkbox]:checked') // <-- just get the checked ones
   // Somehow, extract just the "id" from just the checked elements
   // picked = ['cloud', 'network', 'data'];
   let specificTech;
   for (let i = 0; i < picked.length; i++){
    specificTech = picked[i].name;
   }
$(this).parent().toggleClass('active');

 })

Флажок:

                  <aside class = "filter cell small-12 large-8">
                    <span class = "label">Technologies</span>
                    <div class = "posts-filter">
                        <span class = "posts-filter__sub">
                            <label class = "posts-filter__label cloud">
                                <input type = "checkbox" value = "cloud">
                                <?php cloud_svg(); ?>
                                Cloud
                            </label>
                        </span>
                        <span class = "posts-filter__sub">
                            <label class = "posts-filter__label data">
                                <input type = "checkbox" value = "data">
                                <?php data_svg(); ?>
                                Data Protection & Data Management
                            </label>
                        </span>
                        <span class = "posts-filter__sub">
                            <label class = "posts-filter__label networking">
                                <input type = "checkbox" value = "networking">
                                <?php networking_svg(); ?>
                                Networking
                            </label>
                        </span>
                        <span class = "posts-filter__sub">
                            <label class = "posts-filter__label security">
                                <input type = "checkbox" value = "security">
                                <?php security_svg(); ?>
                                Security
                            </label>
                        </span>
                        <span class = "posts-filter__sub">
                            <label class = "posts-filter__label storage">
                                <input type = "checkbox" value = "storage">
                                <?php storage_svg(); ?>
                                Storage
                            </label>
                        </span>
                        <span class = "posts-filter__sub">
                            <label class = "posts-filter__label virtualization">
                                <input type = "checkbox" value = "virtualization">
                                <?php virtualization_svg(); ?>
                                Virtualization
                            </label>
                        </span>
                    </div>
                </aside>

Изображения:

<a class = "partner cloud data security" href = "http://www.ca.com/" target = "_blank"><img width = "70" height = "70" src = "//localhost:3000/wp-content/uploads/2019/04/Image-7.png" class = "attachment-post-thumbnail size-post-thumbnail wp-post-image" alt = ""></a>

<a class = "partner cloud" href = "http://www.ca.com/" target = "_blank"><img width = "70" height = "70" src = "//localhost:3000/wp-content/uploads/2019/04/Image-7.png" class = "attachment-post-thumbnail size-post-thumbnail wp-post-image" alt = ""></a>

Я думаю, вы можете использовать множественный выбор вместо флажков. Таким образом, вы можете получить массив значений из одного элемента ввода вместо поиска выбранных флажков.

Ace 25.06.2019 21:34
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
36
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Поскольку значения ваших флажков соответствуют классам, которые вы хотите выбрать, вы можете создать из них селектор. Вы сказали, что хотите, если выбрано несколько, чтобы результаты имели значения все, что означает логическое условие а также для селекторов.

$(document.body).on('change', ':checkbox', function(){
  var $checkedCheckboxes = $(':checkbox:checked');
  
  if ($checkedCheckboxes.length) {
    var classesSelector = '.'+ $checkedCheckboxes.get().map(it=>it.value).join('.');
    console.info(classesSelector);
  } else {
    console.info('no elements selected');
  }
});
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
  <input type = "checkbox" value = "cloud">
  Cloud
</label>

<label>
  <input type = "checkbox" value = "data">
  Data
</label>

<label>
  <input type = "checkbox" value = "network">
  Network
</label>

Другие вопросы по теме