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

Question

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

Например,

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

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

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

Answer 1

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

$(document.body).on('change', ':checkbox', function(){
  var $checkedCheckboxes = $(':checkbox:checked');
  
  if ($checkedCheckboxes.length) {
    var classesSelector = '.'+ $checkedCheckboxes.get().map(it=>it.value).join('.');
    console.log(classesSelector);
  } else {
    console.log('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>