产品过滤器 - 根据选中/取消选中的多个复选框显示结果
Posted
技术标签:
【中文标题】产品过滤器 - 根据选中/取消选中的多个复选框显示结果【英文标题】：Product filter - Show results based on multiple checkboxes selected/deselected 【发布时间】：2021-04-24 11:20:32 【问题描述】：我正在构建一个产品过滤器，以根据分辨率、响应时间、品牌等规格缩小显示器选择范围。
我为每个结果创建了 div，规格是类。
每个复选框都有一个值属性。选中后，此属性存储在地图对象中。这样当我取消选中一个复选框时，它就会从地图对象中删除，反之亦然。
map对象的结果用“.”连接在一起之间 存储在变量 assignedTo 中，这会被记录下来，以便您查看哪些已被选中。
我现在的问题是如何显示包含存储在 assignedTo 中的类的所有 div？
我尝试过使用 document.querySelectorAll，然后通过显示块进行循环，但有两个问题：
-
我收到“Uncaught SyntaxError: Failed to execute 'querySelectorAll' on 'Document': '...' is not a valid selector”
如果我成功循环并显示每个结果，如果我取消选中某个框，如何让该结果消失？
$(document).ready(function()
$(':checkbox[type="checkbox"]').on('change', function()
var assignedTo = $(':checkbox[type="checkbox"]:checked').map(function()
return $(this).attr('value');
)
.get().join(".");
console.log(assignedTo);
document.querySelectorAll("div.result." + assignedTo).forEach(div => div.style.display = "block")
);
);.result
width: 100%;
border: 1px solid black;
padding: 20px;
line-height: 20px;
text-align: left;
margin: 10px;
float: left;
font-size: 11px;
color: #000;
font-family: sans-serif;
display: none;
div.results
width: 70%;
display: inline;
float: left;
position: relative;
padding-right: 10%;
div#filters
width: 20%;
display: inline;
float: left;
position: relative;
.btn
background-color: #0077ce;
color: #fff;
font-weight: bold;
border-radius: 10px;
padding: 10px;
display: inline-block;
position: relative;
float: right;
.btn:hover
cursor: pointer;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<title>Test</title>
</head>
<body>
<h1>Find your monitor</h1>
<div id="filters">
<h3>Recommended For</h3>
<ul class="recommended">
<li>
<input type="checkbox" value="home" id="filter-home" />
<label for="filter-home">Home</label>
</li>
<li>
<input type="checkbox" value="office" id="filter-office" />
<label for="filter-office">Office</label>
</li>
<li>
<input type="checkbox" value="gaming" id="filter-gaming" />
<label for="filter-gaming">Gaming</label>
</li>
</ul>
<h3>Size</h3>
<ul class="-monitor-size">
<li>
<input type="checkbox" value="24inch" id="filter-24inch" />
<label for="filter-24inch">24inch</label>
</li>
<li>
<input type="checkbox" value="32inch" id="filter-32inch" />
<label for="filter-32inch">32inch</label>
</li>
<li>
<input type="checkbox" value="40inch" id="filter-40inch" />
<label for="filter-40inch">40inch</label>
</li>
</ul>
<h3>Resolution</h3>
<ul class="monitor-resolution">
<li>
<input type="checkbox" value="1080p" id="filter-1080p" />
<label for="filter-1080p">1080p</label>
</li>
<li>
<input type="checkbox" value="4K" id="filter-4K" />
<label for="filter-4K">4K</label>
</li>
<li>
<input type="checkbox" value="5K" id="filter-5K" />
<label for="filter-5K">5K</label>
</li>
</ul>
<h3>Response Time</h3>
<ul class="monitor-responsetime">
<li>
<input type="checkbox" value="1ms" id="filter-1ms" />
<label for="filter-1ms">1ms</label>
</li>
<li>
<input type="checkbox" value="5ms" id="filter-5ms" />
<label for="filter-5ms">5ms</label>
</li>
<li>
<input type="checkbox" value="10ms" id="filter-10ms" />
<label for="filter-10ms">10ms</label>
</li>
</ul>
<h3>Brand</h3>
<ul class="monitor-brand">
<li>
<input type="checkbox" value="branda" id="filter-branda" />
<label for="filter-branda">Brand A</label>
</li>
<li>
<input type="checkbox" value="brandb" id="filter-brandb" />
<label for="filter-brandb">Brand B</label>
</li>
<li>
<input type="checkbox" value="brandc" id="filter-brandc" />
<label for="filter-brandc">Brand C</label>
</li>
<li>
<input type="checkbox" class="brandd" id="filter-brandd" />
<label for="filter-brandd">Brand D</label>
</li>
<li>
<input type="checkbox" value="brande" id="filter-brande" />
<label for="filter-brande">Brand E</label>
</li>
<li>
<input type="checkbox" value="brandf" id="filter-brandf" />
<label for="filter-brandf">Brand F</label>
</li>
</ul>
</div>
<div class="results">
<div class="result gaming monitor 32inch 4K 5ms branda">32inch 4K Monitor - Brand A <span class="btn">Order</span></div>
<div class="result gaming monitor 32inch 4K 5ms branda">32inch 4K Monitor - Brand A <span class="btn">Order</span></div>
<div class="result gaming monitor 32inch 5K 1ms brandb">32inch 5K Monitor - Brand B<span class="btn">Order</span></div>
<div class="result gaming monitor 40inch 5K 1ms brandc">40inch 5K Monitor - Brand C<span class="btn">Order</span></div>
<div class="result office monitor 24inch 1080p 10ms brandd">24inch 1080p Monitor - Brand D<span class="btn">Order</span></div>
<div class="result home monitor 24inch 4K 5ms brandd">24inch 4K Monitor - Brand D <span class="btn">Order</span></div>
<div class="result gaming monitor 32inch 5K 1ms brande">32inch 5K Monitor - Brand E<span class="btn">Order</span></div>
<div class="result gaming monitor 40inch 5K 1ms brande">40inch 5K Monitor - Brand E<span class="btn">Order</span></div>
<div class="result office monitor 24inch 1080p 10ms brande">24inch 1080p Monitor - Brand E<span class="btn">Order</span></div>
<div class="result home monitor 24inch 4K 5ms brandf">24inch 4K Monitor - Brand F <span class="btn">Order</span></div>
<div class="result home monitor 24inch 4K 5ms brandf">24inch 4K Monitor - Brand F <span class="btn">Order</span></div>
</div>
</body>
</html>【问题讨论】：
【参考方案1】：querySelector 与 selectors that start with a number 有问题。如果您对第一个数字进行转义，则可以使用选择器，在 r.replace(/^(\d)/, '\\3' + '$1 ') 下方的代码中。
由于您在选择器中循环，您可以在显示结果之前隐藏所有元素。在下面的代码中，document.querySelectorAll('div.result').forEach(div => div.style.display = "none"); 就在循环之前。
我还添加了一个条件，以防未选择任何内容。在您的代码中，它导致了一个错误。
$(document).ready(function()
$(':checkbox[type="checkbox"]').on('change', function()
var assignedTo = $(':checkbox[type="checkbox"]:checked').map(function()
let r = $(this).attr('value');
r = r.replace(/^(\d)/, '\\3' + '$1 ');
return r;
)
.get().join(".");
console.log(assignedTo);
document.querySelectorAll('div.result').forEach(div => div.style.display = "none");
if (assignedTo !== "")
document.querySelectorAll("div.result." + assignedTo).forEach(div => div.style.display = "block");
);
);.result
width: 100%;
border: 1px solid black;
padding: 20px;
line-height: 20px;
text-align: left;
margin: 10px;
float: left;
font-size: 11px;
color: #000;
font-family: sans-serif;
display: none;
div.results
width: 70%;
display: inline;
float: left;
position: relative;
padding-right: 10%;
div#filters
width: 20%;
display: inline;
float: left;
position: relative;
.btn
background-color: #0077ce;
color: #fff;
font-weight: bold;
border-radius: 10px;
padding: 10px;
display: inline-block;
position: relative;
float: right;
.btn:hover
cursor: pointer;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<title>Test</title>
</head>
<body>
<h1>Find your monitor</h1>
<div id="filters">
<h3>Recommended For</h3>
<ul class="recommended">
<li>
<input type="checkbox" value="home" id="filter-home" />
<label for="filter-home">Home</label>
</li>
<li>
<input type="checkbox" value="office" id="filter-office" />
<label for="filter-office">Office</label>
</li>
<li>
<input type="checkbox" value="gaming" id="filter-gaming" />
<label for="filter-gaming">Gaming</label>
</li>
</ul>
<h3>Size</h3>
<ul class="-monitor-size">
<li>
<input type="checkbox" value="24inch" id="filter-24inch" />
<label for="filter-24inch">24inch</label>
</li>
<li>
<input type="checkbox" value="32inch" id="filter-32inch" />
<label for="filter-32inch">32inch</label>
</li>
<li>
<input type="checkbox" value="40inch" id="filter-40inch" />
<label for="filter-40inch">40inch</label>
</li>
</ul>
<h3>Resolution</h3>
<ul class="monitor-resolution">
<li>
<input type="checkbox" value="1080p" id="filter-1080p" />
<label for="filter-1080p">1080p</label>
</li>
<li>
<input type="checkbox" value="4K" id="filter-4K" />
<label for="filter-4K">4K</label>
</li>
<li>
<input type="checkbox" value="5K" id="filter-5K" />
<label for="filter-5K">5K</label>
</li>
</ul>
<h3>Response Time</h3>
<ul class="monitor-responsetime">
<li>
<input type="checkbox" value="1ms" id="filter-1ms" />
<label for="filter-1ms">1ms</label>
</li>
<li>
<input type="checkbox" value="5ms" id="filter-5ms" />
<label for="filter-5ms">5ms</label>
</li>
<li>
<input type="checkbox" value="10ms" id="filter-10ms" />
<label for="filter-10ms">10ms</label>
</li>
</ul>
<h3>Brand</h3>
<ul class="monitor-brand">
<li>
<input type="checkbox" value="branda" id="filter-branda" />
<label for="filter-branda">Brand A</label>
</li>
<li>
<input type="checkbox" value="brandb" id="filter-brandb" />
<label for="filter-brandb">Brand B</label>
</li>
<li>
<input type="checkbox" value="brandc" id="filter-brandc" />
<label for="filter-brandc">Brand C</label>
</li>
<li>
<input type="checkbox" class="brandd" id="filter-brandd" />
<label for="filter-brandd">Brand D</label>
</li>
<li>
<input type="checkbox" value="brande" id="filter-brande" />
<label for="filter-brande">Brand E</label>
</li>
<li>
<input type="checkbox" value="brandf" id="filter-brandf" />
<label for="filter-brandf">Brand F</label>
</li>
</ul>
</div>
<div class="results">
<div class="result gaming monitor 32inch 4K 5ms branda">32inch 4K Monitor - Brand A <span class="btn">Order</span></div>
<div class="result gaming monitor 32inch 4K 5ms branda">32inch 4K Monitor - Brand A <span class="btn">Order</span></div>
<div class="result gaming monitor 32inch 5K 1ms brandb">32inch 5K Monitor - Brand B<span class="btn">Order</span></div>
<div class="result gaming monitor 40inch 5K 1ms brandc">40inch 5K Monitor - Brand C<span class="btn">Order</span></div>
<div class="result office monitor 24inch 1080p 10ms brandd">24inch 1080p Monitor - Brand D<span class="btn">Order</span></div>
<div class="result home monitor 24inch 4K 5ms brandd">24inch 4K Monitor - Brand D <span class="btn">Order</span></div>
<div class="result gaming monitor 32inch 5K 1ms brande">32inch 5K Monitor - Brand E<span class="btn">Order</span></div>
<div class="result gaming monitor 40inch 5K 1ms brande">40inch 5K Monitor - Brand E<span class="btn">Order</span></div>
<div class="result office monitor 24inch 1080p 10ms brande">24inch 1080p Monitor - Brand E<span class="btn">Order</span></div>
<div class="result home monitor 24inch 4K 5ms brandf">24inch 4K Monitor - Brand F <span class="btn">Order</span></div>
<div class="result home monitor 24inch 4K 5ms brandf">24inch 4K Monitor - Brand F <span class="btn">Order</span></div>
</div>
</body>
</html>【讨论】：
谢谢！这非常有效。我永远不会想到这一点。实施后，我还意识到为每个类别选择多个复选框并不太奏效。所以我添加了这个代码来阻止用户选择多个框（单选按钮不是一个选项，因为用户还需要取消选择）。 ***.com/questions/9709209/…以上是关于产品过滤器 - 根据选中/取消选中的多个复选框显示结果的主要内容，如果未能解决你的问题，请参考以下文章