同时使用两个复选框和下拉菜单进行准确过滤 [英] Filter accurately with BOTH checkboxes AND dropdown menus at the same time

查看：29
本文介绍了同时使用两个复选框和下拉菜单进行准确过滤的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在构建一个非常可排序/可过滤的图片库，其中包含很多标签.这个问题基于这个问题

var $filterCheckboxes = $('input[type="checkbox"]');var $filtermenues = $('.grid1');filterfuncAnother = 函数 () {var selectedFilters = [];$filtermenues.find(":selected").each(function () {调试器var v = this.value;if (selectedFilters.indexOf(v) === -1 && v)selectedFilters.push(v);});$('.animal' && '.filterDiv').隐藏().筛选(函数 (_, a) {var itemCat = $(a)​​.data('category').split(' ');如果 (itemCat.indexOf("showAll") > -1)返回;返回 selectedFilters.every(功能(c){返回 itemCat.indexOf(c) >-1;})}).展示();}var filterFunc = 函数 () {var selectedFilters = [];调试器$filterCheckboxes.filter(':checked').each(function () {var v = this.value;if (selectedFilters.indexOf(v) === -1)selectedFilters.push(v);});$('.animal' && '.filterDiv').隐藏().筛选(函数 (_, a) {var itemCat = $(a)​​.data('category').split(' ');返回 selectedFilters.every(功能(c){返回 itemCat.indexOf(c) >-1;})}).展示();}$filterCheckboxes.on('change', filterFunc);$('select').on('change', filterfuncAnother);

body {宽度:100%；文本对齐:居中；背景颜色:黑色；白颜色;字体系列:无衬线；}.网格 {宽度:300px；边距:50px 自动；显示:网格；网格模板列:1fr 1fr 1fr；}.grid1 {宽度:300px；边距:50px 自动；显示:网格；网格模板列:1fr 1fr 1fr；}.filterDiv {宽度:100px；高度:100px；填充顶部:20px；颜色:黑色;字体粗细:粗体；}

<!-- 基于这个 URL:https://stackoverflow.com/q/68315184/4383420 --><!-- 此 URL 中需要帮助:https://stackoverflow.com/q/68317206/4383420 --><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>调试游戏！
<选择><option value="">--</option><option value="紫罗兰色">紫罗兰色</option></选择><选择><option value="">--</option><option value="blue">blue</option></选择><选择><option value="">--</option><option value="yellow">yellow</option></选择>
<div 类=网格><标签>紫罗兰色<input type="checkbox" value="紫罗兰色"/><span class="checkmark"></span><标签>蓝色<input type="checkbox" value="blue"/><span class="checkmark"></span><标签>黄色<input type="checkbox" value="yellow"/><span class="checkmark"></span>

<div 类=网格><div class="filterDiv" data-category="violet blue" style="background-color: blue">标签:<br/>紫<br/>蓝</div><div class="filterDiv" data-category="violet red MVP" style="background-color: red">Tags: <br/>紫罗兰 <br/>red <br/>MVP

<div class="filterDiv" data-category="yellow" style="background-color: yellow">标签:<br/>yellow</div>

<div><label>最有价值球员 (MVP)<input type="checkbox" value="MVP"/><br/>(除了 MVP 之外的任何其他人都不应该一直被看到.<br/>但是如果不符合规则，也可以隐藏 MVP.)<span class="checkmark"></span>

<div style="width:400px; text-align: left; margin: 60px auto;">规则:<p style="color:gray;">*刷新*</p><p>1.开启 MVP.从下拉菜单中选择蓝色 >全部都应该隐藏.</p><p style="color:gray;">*刷新*</p><p>2.从下拉菜单中选择黄色.开启 MVP >全部都应该隐藏.</p><p style="color:gray;">*刷新*</p><p>3.开启 MVP.从下拉菜单中选择黄色 >全部都应该隐藏.</p><p style="color:gray;">*刷新*</p><p>BONUS1:开启MVP.从下拉菜单中选择黄色.关闭 MVP >应该只看到黄色.</p><p style="color:gray;">*刷新*</p><p>BONUS2:从下拉菜单中选择黄色.检查黄色复选框.取消选中黄色复选框 >应该只看到黄色.</p><p>恭喜！</p>

解决方案

如果您希望两个元素的行为方式相同，您可能希望在同一个函数中设置它们的行为:

var $filterCheckboxes = $('input[type="checkbox"]');var $filtermenues = $('.grid1');var filterFunc = 函数 () {var selectedFilters = [];$filtermenues.find(":selected").each(function () {var v = this.value;if (selectedFilters.indexOf(v) === -1 && v)selectedFilters.push(v);});$('.animal' && '.filterDiv').隐藏().筛选(函数 (_, a) {var itemCat = $(a)​​.data('category').split(' ');如果 (itemCat.indexOf("showAll") > -1)返回;返回 selectedFilters.every(功能(c){返回 itemCat.indexOf(c) >-1;})}).展示();$filterCheckboxes.filter(':checked').each(function () {var v = this.value;if (selectedFilters.indexOf(v) === -1)selectedFilters.push(v);});$('.animal' && '.filterDiv').隐藏().筛选(函数 (_, a) {var itemCat = $(a)​​.data('category').split(' ');返回 selectedFilters.every(功能(c){返回 itemCat.indexOf(c) >-1;})}).展示();}$filterCheckboxes.on('change', filterFunc);$('select').on('change', filterFunc);

body {宽度:100%；文本对齐:居中；背景颜色:黑色；白颜色;字体系列:无衬线；}.网格 {宽度:300px；边距:50px 自动；显示:网格；网格模板列:1fr 1fr 1fr；}.grid1 {宽度:300px；边距:50px 自动；显示:网格；网格模板列:1fr 1fr 1fr；}.filterDiv {宽度:100px；高度:100px；填充顶部:20px；颜色:黑色;字体粗细:粗体；}

<!-- 基于这个 URL:https://stackoverflow.com/q/68315184/4383420 --><!-- 此 URL 中需要帮助:https://stackoverflow.com/q/68317206/4383420 --><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>调试游戏！
<选择><option value="">--</option><option value="紫罗兰色">紫罗兰色</option></选择><选择><option value="">--</option><option value="blue">blue</option></选择><选择><option value="">--</option><option value="yellow">yellow</option></选择>
<div 类=网格><标签>紫罗兰色<input type="checkbox" value="紫罗兰色"/><span class="checkmark"></span><标签>蓝色<input type="checkbox" value="blue"/><span class="checkmark"></span><标签>黄色<input type="checkbox" value="yellow"/><span class="checkmark"></span>

<div 类=网格><div class="filterDiv" data-category="violet blue" style="background-color: blue">标签:<br/>紫<br/>蓝</div><div class="filterDiv" data-category="violet red MVP" style="background-color: red">Tags: <br/>紫罗兰 <br/>red <br/>MVP

<div class="filterDiv" data-category="yellow" style="background-color: yellow">标签:<br/>yellow</div>

<div><label>最有价值球员 (MVP)<input type="checkbox" value="MVP"/><br/>(除了 MVP 之外的任何其他人都不应该一直被看到.<br/>但是如果不符合规则，也可以隐藏 MVP.)<span class="checkmark"></span>

<div style="width:400px; text-align: left; margin: 60px auto;">规则:<p style="color:gray;">*刷新*</p><p>1.开启 MVP.从下拉菜单中选择蓝色 >全部都应该隐藏.</p><p style="color:gray;">*刷新*</p><p>2.从下拉菜单中选择黄色.开启 MVP >全部都应该隐藏.</p><p style="color:gray;">*刷新*</p><p>3.开启 MVP.从下拉菜单中选择黄色 >全部都应该隐藏.</p><p style="color:gray;">*刷新*</p><p>BONUS1:开启MVP.从下拉菜单中选择黄色.关闭 MVP >应该只看到黄色.</p><p style="color:gray;">*刷新*</p><p>BONUS2:从下拉菜单中选择黄色.检查黄色复选框.取消选中黄色复选框 >应该只看到黄色.</p><p>恭喜！</p>

I'm building a very sortable/filterable image gallery with a lot of tags. This question is based upon this one How to get dropdown menus behave like checkboxes? in where I got most of my problems answered.

EDIT: Here the finished code from this question is taken even further: With a UNCHECKED checkbox, how to filter out NSFW tagged divs to be hidden at all times but when checked ON, to follow the visibility rules?

But I thought that maybe you'd like to play a little Debugging Game to polish it even further :) Because the dropdown menus aren't playing perfectly with the checkboxes.

Here you go: https://codepen.io/manujarvinen/pen/QWvEogb

And an image of it: 

var $filterCheckboxes = $('input[type="checkbox"]');
       var $filtermenues = $('.grid1');

       filterfuncAnother = function () {
           var selectedFilters = [];

           $filtermenues.find(":selected").each(function () {
               debugger
               var v = this.value;
               if (selectedFilters.indexOf(v) === -1 && v)
                   selectedFilters.push(v);
           });

           $('.animal' && '.filterDiv')
               .hide()
               .filter(
                   function (_, a) {
                       var itemCat = $(a).data('category').split(' ');
                       if (itemCat.indexOf("showAll") > -1)
                           return;
                       return selectedFilters.every(
                           function (c) {
                               return itemCat.indexOf(c) > -1;
                           })
                   })
               .show();
       }

       var filterFunc = function () {

           var selectedFilters = [];
           debugger
           $filterCheckboxes.filter(':checked').each(function () {
               var v = this.value;
               if (selectedFilters.indexOf(v) === -1)
                   selectedFilters.push(v);
           });

           $('.animal' && '.filterDiv')
               .hide()
               .filter(
                   function (_, a) {
                       var itemCat = $(a).data('category').split(' ');
                       return selectedFilters.every(
                           function (c) {
                               return itemCat.indexOf(c) > -1;
                           })
                   })
               .show();

       }

       $filterCheckboxes.on('change', filterFunc);

       $('select').on('change', filterfuncAnother);

body {
width: 100%;
text-align: center;
background-color: black;
color: white;
font-family: sans-serif;
}
.grid {
width: 300px;
margin: 50px auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.grid1 {
width: 300px;
margin: 50px auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.filterDiv {
width: 100px;
height: 100px;
padding-top: 20px;
color: black;
font-weight: bold;
}

<!-- Based upon this URL: https://stackoverflow.com/q/68315184/4383420 -->

<!-- Help needed in this URL: https://stackoverflow.com/q/68317206/4383420 -->

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  DEBUGGING GAME!

   <div class=grid1>
          <select>
              <option value="">--</option>
              <option value="violet">violet</option>
          </select>
          <select>
              <option value="">--</option>
              <option value="blue">blue</option>
          </select>
          <select>
              <option value="">--</option>
              <option value="yellow">yellow</option>
          </select>
      </div>

  <div class=grid>
      <label>VIOLET
      <input type="checkbox" value="violet" />
      <span class="checkmark"></span>
      </label>
      <label>BLUE
      <input type="checkbox" value="blue" />
      <span class="checkmark"></span>
      </label>
      <label>YELLOW
      <input type="checkbox" value="yellow" />
      <span class="checkmark"></span>
      </label>
  </div>

  <div class=grid>
      <div class="filterDiv" data-category="violet blue" style="background-color: blue">Tags: <br />violet <br />blue</div>
      <div class="filterDiv" data-category="violet red MVP" style="background-color: red">Tags: <br />violet <br />red <br />MVP</div>
      <div class="filterDiv" data-category="yellow" style="background-color: yellow">Tags: <br />yellow</div>
  </div>


  <div>
  <label>Most Valuable Player (MVP)
  <input type="checkbox" value="MVP" />
  <br />(ANY others than MVP shouldn't be seen at ALL times.<br />BUT it's okay for MVP to be hidden also, if rules aren't met.)
  <span class="checkmark"></span>
  </label>
  </div>

    <div style="width:400px; text-align: left; margin: 60px auto;">
    RULES:
    <p style="color:gray;">*Refresh*</p>
    <p>1. Turn ON MVP. Select BLUE from dropdown > ALL should be hidden.</p>
    <p style="color:gray;">*Refresh*</p>
    <p>2. Select YELLOW from dropdown. Turn on MVP > ALL should be hidden.</p>
    <p style="color:gray;">*Refresh*</p>
    <p>3. Turn ON MVP. Select YELLOW from dropdown > ALL should be hidden.</p>
    <p style="color:gray;">*Refresh*</p>
    <p>BONUS1: Turn ON MVP. Select YELLOW from dropdown. Turn OFF MVP > ONLY YELLOW should be seen.</p>
    <p style="color:gray;">*Refresh*</p>
    <p>BONUS2: Select YELLOW from dropdown. Check YELLOW CHECKBOX. Uncheck YELLOW CHECKBOX > ONLY YELLOW should be seen.</p>
      <p>CONGRATULATIONS!</p>
    </div>

解决方案

If you want both elements to behave the same way, you probably want to set their behavior in the same function:

var $filterCheckboxes = $('input[type="checkbox"]');
       var $filtermenues = $('.grid1');


       var filterFunc = function () {

           var selectedFilters = [];
           $filtermenues.find(":selected").each(function () {
               
               var v = this.value;
               if (selectedFilters.indexOf(v) === -1 && v)
                   selectedFilters.push(v);
           });

           $('.animal' && '.filterDiv')
               .hide()
               .filter(
                   function (_, a) {
                       var itemCat = $(a).data('category').split(' ');
                       if (itemCat.indexOf("showAll") > -1)
                           return;
                       return selectedFilters.every(
                           function (c) {
                               return itemCat.indexOf(c) > -1;
                           })
                   })
               .show();
           $filterCheckboxes.filter(':checked').each(function () {
               var v = this.value;
               if (selectedFilters.indexOf(v) === -1)
                   selectedFilters.push(v);
           });

           $('.animal' && '.filterDiv')
               .hide()
               .filter(
                   function (_, a) {
                       var itemCat = $(a).data('category').split(' ');
                       return selectedFilters.every(
                           function (c) {
                               return itemCat.indexOf(c) > -1;
                           })
                   })
               .show();

       }

       $filterCheckboxes.on('change', filterFunc);

       $('select').on('change', filterFunc);

body {
width: 100%;
text-align: center;
background-color: black;
color: white;
font-family: sans-serif;
}
.grid {
width: 300px;
margin: 50px auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.grid1 {
width: 300px;
margin: 50px auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.filterDiv {
width: 100px;
height: 100px;
padding-top: 20px;
color: black;
font-weight: bold;
}

<!-- Based upon this URL: https://stackoverflow.com/q/68315184/4383420 -->

<!-- Help needed in this URL: https://stackoverflow.com/q/68317206/4383420 -->

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  DEBUGGING GAME!

   <div class=grid1>
          <select>
              <option value="">--</option>
              <option value="violet">violet</option>
          </select>
          <select>
              <option value="">--</option>
              <option value="blue">blue</option>
          </select>
          <select>
              <option value="">--</option>
              <option value="yellow">yellow</option>
          </select>
      </div>

  <div class=grid>
      <label>VIOLET
      <input type="checkbox" value="violet" />
      <span class="checkmark"></span>
      </label>
      <label>BLUE
      <input type="checkbox" value="blue" />
      <span class="checkmark"></span>
      </label>
      <label>YELLOW
      <input type="checkbox" value="yellow" />
      <span class="checkmark"></span>
      </label>
  </div>

  <div class=grid>
      <div class="filterDiv" data-category="violet blue" style="background-color: blue">Tags: <br />violet <br />blue</div>
      <div class="filterDiv" data-category="violet red MVP" style="background-color: red">Tags: <br />violet <br />red <br />MVP</div>
      <div class="filterDiv" data-category="yellow" style="background-color: yellow">Tags: <br />yellow</div>
  </div>


  <div>
  <label>Most Valuable Player (MVP)
  <input type="checkbox" value="MVP" />
  <br />(ANY others than MVP shouldn't be seen at ALL times.<br />BUT it's okay for MVP to be hidden also, if rules aren't met.)
  <span class="checkmark"></span>
  </label>
  </div>

    <div style="width:400px; text-align: left; margin: 60px auto;">
    RULES:
    <p style="color:gray;">*Refresh*</p>
    <p>1. Turn ON MVP. Select BLUE from dropdown > ALL should be hidden.</p>
    <p style="color:gray;">*Refresh*</p>
    <p>2. Select YELLOW from dropdown. Turn on MVP > ALL should be hidden.</p>
    <p style="color:gray;">*Refresh*</p>
    <p>3. Turn ON MVP. Select YELLOW from dropdown > ALL should be hidden.</p>
    <p style="color:gray;">*Refresh*</p>
    <p>BONUS1: Turn ON MVP. Select YELLOW from dropdown. Turn OFF MVP > ONLY YELLOW should be seen.</p>
    <p style="color:gray;">*Refresh*</p>
    <p>BONUS2: Select YELLOW from dropdown. Check YELLOW CHECKBOX. Uncheck YELLOW CHECKBOX > ONLY YELLOW should be seen.</p>
      <p>CONGRATULATIONS!</p>
    </div>

这篇关于同时使用两个复选框和下拉菜单进行准确过滤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆