Javascript 使用输入隐藏和显示特定类名的div，并且仅显示该类

我有一组对应于一组图像的复选框。选中输入时，应仅显示具有相应类的图像。并不是所有的图像都有这个类和其他类

比如说,

有些图像具有类cloud，而其他图像可能具有云和数据、云、数据和网络等等。当我选中cloud时，应该只显示带有cloud的图像。当我检查云和数据时，应该只显示那些包含云和数据的图像

这就是我试图将活动类添加到复选框中的内容。这部分很有效，因为我需要强调它们

$('.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');

 })

$（'.posts过滤器输入[type=checkbox]'）。更改（函数（）{
//审核所有复选框的开/关状态
let picked=$（'.posts过滤器输入[类型=复选框]：选中'）//由于复选框的值与要选择的类匹配，因此可以从中构造选择器。您说过，如果选择了多个，则结果应包含所有值，这意味着选择器具有逻辑和条件


$（document.body）.on（'change'，'：checkbox'，function（）{
var$checkedCheckboxes=$（':checkbox:checked'）；
如果（$checkedCheckboxes.length）{
var classesSelector='.'.+$checkedcheckbox.get（）.map（it=>it.value.join（'.'）；
console.log（classesSelector）；
}否则{
log（“未选择任何元素”）；
}
})；

云
数据
网络
我认为您可能希望使用多选而不是复选框。这样，您就可以从一个输入元素获得一个值数组，而不是搜索选定的复选框。
                  <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>