I have a problem such this:
There are several checkboxes and I want to filter some document elements according the states (checked/unchecked) of these checkboxes.
On first load of the page all items are shown. The if checkbox(es) is(are) checked - only items having at least one these attributes will be showed. If checked item is unchecked again - the hidden elements (hidden - because of verily this check action) will appear again.
My plan to achieve this:
- Declare empty arrays:
- Push them values from checkboxes (with onchange). If a value is already there, remove that element.
- Check interested DOM elements have at least one element from these arrays
I tried something and here is my code. But don't know what am I doing wrong - I even can not estimate what is happening when checking the boxes.
Any help about fixing this unusual behaviour, coding style, and refactoring of the code is appreciated. Also feel free to refer to a library/plugin dealing with that kind of filtering :)
P.S. BTW, guides with map, filter, some, every are more appreciated ;-)
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var countries = [];
var collections = [];
var brands = [];
function cnt(x) {
if (countries.indexOf(x) == -1)
{
countries.push(x);
console.log(x+" pushed to countries");
}
else
{
i = countries.indexOf(x);
countries.splice(i,1);
console.log(x+" removed from countries");
}
console.log(countries);
}
function brnd(x) {
if (brands.indexOf(x) == -1)
{
brands.push(x);
console.log(x+" pushed to brands");
}
else
{
i = brands.indexOf(x);
brands.splice(i,1);
console.log(x+" removed from brands");
}
console.log(brands);
}
function col(x) {
if (collections.indexOf(x) == -1)
{
collections.push(x);
console.log(x+" pushed to collections");
}
else
{
i = collections.indexOf(x);
collections.splice(i,1);
console.log(x+" removed from collections");
}
console.log(collections);
}
function unuseful(el) {
if ((countries.length > 0) || (countries.length > 0) || (countries.length > 0))
{
country_index = countries.indexOf(el.dataset.country);
brand_index = brands.indexOf(el.dataset.brand);
collection_index = collections.indexOf(el.dataset.collection);
s = country_index + brand_index + collection_index;
return s == -3;
}
return false;
}
function h(x) {
x.style.display = 'none';
}
function hideBitches() {
var context = document.getElementById("products");
var items = context.getElementsByClassName("item");
for(j=0; len=items.length, j<len; ++j) {
if(unuseful(items[j])) {
h(items[j]);
console.log(items[j]+" is hidden")
}
}
}
</script>
<div id="countries">
<input type="checkbox" name="country" value="1" onchange="cnt(this.value); hideBitches()">
Poland
<input type="checkbox" name="country" value="2" onchange="cnt(this.value); hideBitches()">
Germany
<input type="checkbox" name="country" value="3" onchange="cnt(this.value); hideBitches()">
Venezuela
<input type="checkbox" name="country" value="4" onchange="cnt(this.value); hideBitches()">
Cuba
</div>
<div id="brand">
<input type="checkbox" name="brand" value="1" onchange="brnd(this.value); hideBitches()">
Laviva
<input type="checkbox" name="brand" value="2" onchange="brnd(this.value); hideBitches()">
Parmesan
<input type="checkbox" name="brand" value="3" onchange="brnd(this.value); hideBitches()">
Mercenarios
<input type="checkbox" name="brand" value="4" onchange="brnd(this.value); hideBitches()">
Penguin
</div>
<div id="collection">
<input type="checkbox" name="col" value="1" onchange="col(this.value); hideBitches()">
Mephistopheles
<input type="checkbox" name="col" value="2" onchange="col(this.value); hideBitches()">
Marsupial
<input type="checkbox" name="col" value="3" onchange="col(this.value); hideBitches()">
Cangaroo
<input type="checkbox" name="col" value="4" onchange="col(this.value); hideBitches()">
Aufhebung
<input type="checkbox" name="col" value="5" onchange="col(this.value); hideBitches()">
Nestor Makhno
</div>
<input type="submit" name="submit" value="search">
<div id="products">
<div class="item" data-country="3" data-collection="3" data-brand="3">
<p>Eternal cn 3br 3 cl 3</p>
<img src="/store/media/file000466623310.jpg" style="width:100px; height:50px">
<p>300*15*15</p>
</div>
<div class="item" data-country="2" data-collection="3" data-brand="1">
<p>Eternity cn 2br 1 cl 3</p>
<img src="/store/media/file000466623310.jpg" style="width:100px; height:50px">
<p>320*15*12</p>
</div>
<div class="item" data-country="4" data-collection="2" data-brand="2">
<p>Ether cn 4br 2 cl 2</p>
<img src="/store/media/file000466623310.jpg" style="width:100px; height:50px">
<p>330*20*15</p>
</div>
<div class="item" data-country="2" data-collection="3" data-brand="1">
<p>Leather cn 2br 1 cl 3</p>
<img src="/store/media/file000466623310.jpg" style="width:100px; height:50px">
<p>350*25*18</p>
</div>
<div class="item" data-country="3" data-collection="1" data-brand="4">
<p>FLeather cn 3br 4 cl 1</p>
<img src="/store/media/file000466623310.jpg" style="width:100px; height:50px">
<p>350*25*18</p>
</div>
<div class="item" data-country="2" data-collection="4" data-brand="3">
<p>Feather cn 2br 3 cl 4</p>
<img src="/store/media/file000466623310.jpg" style="width:100px; height:50px">
<p>250*15*28</p>
</div>
<div class="item" data-country="4" data-collection="3" data-brand="2">
<p>Weather cn 4br 2 cl 3</p>
<img src="/store/media/file000466623310.jpg" style="width:100px; height:50px">
<p>250*16*28</p>
</div>
<div class="item" data-country="3" data-collection="1" data-brand="2">
<p>Theatre cn 3br 2 cl 1</p>
<img src="/store/media/file000466623310.jpg" style="width:100px; height:50px">
<p>150*20*18</p>
</div>
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire