【发布时间】：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>【问题讨论】：
标签： javascript html jquery checkbox filter