У меня есть группа флажков, соответствующих группе изображений. Когда вход проверен, должны появиться только те изображения с соответствующим классом. И не все изображения, которые могут иметь этот класс с другими классами.
Например,
Некоторые изображения имеют классовое облако, в то время как другие могут иметь облако и данные, облако, данные и сеть и так далее. Когда я проверяю облако, должны появляться только изображения с облаком. Когда я проверяю облако и данные, должны отображаться только изображения с облаком и данными.
Это то, что я пытался добавить активный класс к своим флажкам. Эта часть работает, так как мне нужно выделить их
$('.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>



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Поскольку значения ваших флажков соответствуют классам, которые вы хотите выбрать, вы можете создать из них селектор. Вы сказали, что хотите, если выбрано несколько, чтобы результаты имели значения все, что означает логическое условие а также для селекторов.
$(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>
Я думаю, вы можете использовать множественный выбор вместо флажков. Таким образом, вы можете получить массив значений из одного элемента ввода вместо поиска выбранных флажков.