javascript - 使用输入隐藏和显示特定类名称的 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>