我正在尝试使用javascript创建过滤器。我要完成的是：
单击复选框时，具有所选类别的每个div（汽车或动物）应显示（显示：块），不包含该分类的其他div应隐藏（显示：无）。
我已经提出了以下代码，但是它没有按预期工作。仅当您选中两个复选框后，它才起作用，但随后隐藏了同时包含汽车和动物的类。它应该显示它是否包含其中之一。
这个想法非常简单，请查看是否选中了复选框，然后将其推入数组。如果它在该数组中，则更改为“ display：block”，否则添加“ display：none”。但是，正如我所说的那样，出现了问题..知道可能是什么问题吗？
Javascript：
let anotherOne = (x) => {
let all = document.getElementsByClassName('filterDiv'); //all filterable divs
let checkBoxCars = document.getElementById('cars');
let checkBoxAnimals = document.getElementById('animals');
let elements = document.getElementsByClassName(x); //divs with selected class
//Empty arrays for pushing checked and unchecked boxes.
let isChecked = []
let unChecked = []
if (checkBoxCars.checked == true) {
isChecked.push('cars')
} else {
unChecked.push('cars')
}
if (checkBoxAnimals.checked == true) {
isChecked.push('animals')
} else {
unChecked.push('animals')
}
//if checkbox value is in checked array then
if (isChecked.indexOf(x) > -1) {
//In the array
for (i = 0; i < elements.length; i++) {
elements[i].style.display = "block";
}
} else {
//Not in the array
for (i = 0; i < elements.length; i++) {
elements[i].style.display = "none";
}
}
//If all checkboxes is unset, show all
if (isChecked.length == 0) {
for (i = 0; i < all.length; i++) {
all[i].style.display = "block";
}
}
}
HTML：
<body>
<div id="myBtnContainer">
<input type="checkbox" id="cars" onclick="anotherOne('cars')">
<label for="cars">cars</label>
<input type="checkbox" id="animals" onclick="anotherOne('animals')">
<label for="animals">animals</label>
</div>
<!-- The filterable elements. Note that some have multiple class names (this can be used if they belong to multiple categories) -->
<div class="container">
<div id="cars" class="filterDiv show cars">BMW</div>
<div class="filterDiv show cars animals">CarDog1</div>
<div class="filterDiv show cars">Volvo</div>
<div class="filterDiv show cars">Mustang</div>
<div class="filterDiv show animals">Cat</div>
<div class="filterDiv show animals">Dog</div>
<div class="filterDiv show cars animals">CarDog2</div>
<div class="filterDiv show animals">Cow</div>
</div>
</body>
您可以尝试以下方式：
let anotherOne = (x) => {
let all = document.querySelectorAll('.container div'); //all filterable divs
all.forEach(el => el.style.display = 'none');
let car = document.querySelector('#cars'); //cars
let animal = document.querySelector('#animals'); //animals
if(car.checked){
document.querySelectorAll('.container .cars').forEach(el => el.style.display = 'block');
}
else if(!car.checked){
document.querySelectorAll('.container .cars').forEach(el => el.style.display = 'none');
}
if(animal.checked){
document.querySelectorAll('.container .animals').forEach(el => el.style.display = 'block');
}
else if(!animal.checked){
document.querySelectorAll('.container .animals').forEach(el => el.style.display = 'none');
}
var both = document.querySelectorAll('#cars:checked, #animals:checked');
if(both.length == 2){
all.forEach(el => el.style.display = 'block');
}
}
function filterSelection(){
let all = document.querySelectorAll('.container div'); //all filterable divs
all.forEach(el => el.style.display = 'block');
}<body>
<!-- Control buttons -->
<div id="myBtnContainer">
<button class="btn active" onclick="filterSelection()"> Show all</button>
<input type="checkbox" id="cars" onclick="anotherOne()">
<label for="cars">cars</label>
<!--<button class="btn" onclick="carsToggle()"> Cars</button>-->
<input type="checkbox" id="animals" onclick="anotherOne()">
<label for="animals">animals</label>
</div>
<!-- The filterable elements. Note that some have multiple class names (this can be used if they belong to multiple categories) -->
<div class="container">
<div id="cars" class="filterDiv show cars">BMW</div>
<div class="filterDiv show cars animals">CarDog1</div>
<div class="filterDiv show cars">Volvo</div>
<div class="filterDiv show cars">Mustang</div>
<div class="filterDiv show animals">Cat</div>
<div class="filterDiv show animals">Dog</div>
<div class="filterDiv show cars animals">CarDog2</div>
<div class="filterDiv show animals">Cow</div>
</div>
</body>