大家好，我想问一下为什么我在Javascript上的过滤器只显示第一行，不能取消过滤？我是javascript的新手，我已经给了这个类一个数字来检查，但似乎不起作用，这是我的代码
null
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="height=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport">
<title>Document</title>
<style>
</style>
<!-- <script type="text/javascript" src="http://livejs.com/live.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- <script src="test2.js"></script> -->
<script>
function change() {
let results = Array.from(document.querySelectorAll('.result > div')),
modelsChecked = document.querySelectorAll('.filter input.models:checked'),
processorsChecked = document.querySelectorAll('.filter input.processors:checked');
// Hide all results
results.forEach(function(result) {
result.style.display = 'none';
});
// Filter results to only those that meet ALL requirements:
filterModelsOrProcessors(modelsChecked);
if (processorsChecked.length != 0) {
filterModelsOrProcessors(processorsChecked);
}
function filterModelsOrProcessors(modelsOrProcessorsChecked) {
results = Array.from(modelsOrProcessorsChecked).reduce(function(sum, input) {
const attrib = input.getAttribute('rel');
return sum.concat(results.filter(function(result) {
return result.classList.contains(attrib);
}));
}, []);
}
// Show those filtered results:
results.forEach(function(result) {
result.style.display = 'block';
});
}
change();
</script>
</head>
<body>
<div class="filter">
<h1>Select models</h1>
<div class="checkbox">
<label>
<input type="checkbox" rel="apple" class="models" onchange="change()" />Apple</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" rel="samsung" class="models" onchange="change()" />Samsung</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" rel="xiaomi" class="models" onchange="change()" />Xiaomi</label>
</div>
<h1>Select processors</h1>
<div class="checkbox">
<label>
<input type="checkbox" rel="a9" class="processors" onchange="change()" />A9</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" rel="a8" class="processors" onchange="change()" />A8</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" rel="snapdragon" class="processors" onchange="change()" />Snapdragon</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" rel="exynos" class="processors" onchange="change()" />Exynos</label>
</div>
</div>
<div class="result">
<div class="apple a9">
<h1>iPhone 7</h1>
</div>
<div class="apple a8">
<h1>iPhone 6</h1>
</div>
<div class="samsung exynos">
<h1>Samsung s7</h1>
</div>
<div class="xiaomi snapdragon">
<h1>Xiaomi Redmi note 4x</h1>
</div>
</div>
</body>
</html>null
你隐藏了所有的东西，不管天气是否检查了过滤器。如果更改发生时没有选中筛选器，则表示以前的筛选器已被删除，因此必须显示所有结果
null
function change() {
let results = Array.from(document.querySelectorAll('.result > div')),
modelsChecked = document.querySelectorAll('.filter input.models:checked'),
processorsChecked = document.querySelectorAll('.filter input.processors:checked');
// Start fresh, if nothing is checked this will display everything
results.forEach(result => result.style.display = 'block');
// Hide stuff that matches (only when there are filters)
if (modelsChecked.length || processorsChecked.length) {
// Hide all results
results.forEach(result=> result.style.display = 'none');
// Filter results to only those that meet ALL requirements:
filterModelsOrProcessors([...processorsChecked, ...modelsChecked]);
function filterModelsOrProcessors(modelsOrProcessorsChecked) {
results = results.filter(result => {
return modelsOrProcessorsChecked.some(input => {
const attrib = input.getAttribute('rel');
return result.classList.contains(attrib);
})
});
}
// Show those filtered results:
results.forEach(result => result.style.display = 'block');
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filter">
<h1>Select models</h1>
<div class="checkbox">
<label>
<input type="checkbox" rel="apple" class="models" onchange="change()" />Apple
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" rel="samsung" class="models" onchange="change()" />Samsung
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" rel="xiaomi" class="models" onchange="change()" />Xiaomi
</label>
</div>
<h1>Select processors</h1>
<div class="checkbox">
<label>
<input type="checkbox" rel="a9" class="processors" onchange="change()" />A9
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" rel="a8" class="processors" onchange="change()" />A8
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" rel="snapdragon" class="processors" onchange="change()" />Snapdragon</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" rel="exynos" class="processors" onchange="change()" />Exynos</label>
</div>
</div>
<div class="result">
<div class="apple a9">
<h1>iPhone 7</h1>
</div>
<div class="apple a8">
<h1>iPhone 6</h1>
</div>
<div class="samsung exynos">
<h1>Samsung s7</h1>
</div>
<div class="xiaomi snapdragon">
<h1>Xiaomi Redmi note 4x</h1>
</div>
</div>