时间戳

首页 > 解决方案 > 使用 Input 隐藏和显示特定类名的 div 并且仅显示一个类

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

标签： javascriptphpjquerywordpress

解决方案

由于您的复选框的值与您要选择的类匹配，因此您可以从中构造一个选择器。您说如果选择了多个，则结果应该具有所有值，这意味着选择器的逻辑和条件。

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

推荐阅读