javascript - How do I filter multiple list items using checkboxes? -
how create 2 checkboxes, displaying (i.e.) 1. food , 2. musician…
where
1) if both checkboxes checked, food , musicians displayed;
2) if food checked , musician unchecked, element still visible, because contains food, dispite contains musician;
3) if musician checked , food unchecked, still visible, because contains musician, dispite contains food;
4) if both food , musician unchecked, li item disappears.
my html is:
<html> <head> </head> <body> <ul class="filtersection"> <li> <input checked="true" type="checkbox" value="food"/> <label>food</label> </li> <li> <input checked="true" type="checkbox" value="musician"/> <label>musician</label> </li> </ul> <ul id="itemstofilter"> <li data-type="food">food</li> <li data-type="musician">musician</li> <li data-type="food musician">food & musician</li> <ul> </body> </html> and following javascript code (integrated below 2 lists):
<script> // of our list items var itemstofilter = document.queryselectorall("#itemstofilter li"); //setup click event handlers on our checkboxes var checkboxes = document.queryselectorall(".filtersection li input"); (var = 0; < checkboxes.length; i++) { checkboxes[i].addeventlistener("click", filteritems, false); checkboxes[i].checked = true; } // event handler! function filteritems(e) { var clickeditem = e.target; if (clickeditem.checked == true) { hideorshowitems(clickeditem.value, "hideitem", "showitem"); } else if (clickeditem.checked == false) { hideorshowitems(clickeditem.value, "showitem", "hideitem"); } else { // deal indeterminate state if needed } } // add or remove classes show or hide our content function hideorshowitems(itemtype, classtoremove, classtoadd) { for (var = 0; < itemstofilter.length; i++) { var currentitem = itemstofilter[i]; if (currentitem.getattribute("data-type") == itemtype) { removeclass(currentitem, classtoremove); addclass(currentitem, classtoadd); } } } // // helper functions adding , removing class values // function addclass(element, classtoadd) { var currentclassvalue = element.classname; if (currentclassvalue.indexof(classtoadd) == -1) { if ((currentclassvalue == null) || (currentclassvalue === "")) { element.classname = classtoadd; } else { element.classname += " " + classtoadd; } } } function removeclass(element, classtoremove) { var currentclassvalue = element.classname; if (currentclassvalue == classtoremove) { element.classname = ""; return; } var classvalues = currentclassvalue.split(" "); var filteredlist = []; for (var = 0 ; < classvalues.length; i++) { if (classtoremove != classvalues[i]) { filteredlist.push(classvalues[i]); } } element.classname = filteredlist.join(" "); } </script> i found out in css can following:
#itemstofilter li[data-type*=food] {background-color: green;} #itemstofilter li[data-type*=musician] {background-color: yellow;} (the asterisk causes 1 or multiple data-type attributes recognised)
no problems there, i'm interested in javascript-part:
where
1) if both checkboxes checked, food , musicians displayed;
2) if food checked , musician unchecked, element still visible, because contains food, dispite contains musician;
3) if musician checked , food unchecked, still visible, because contains musician, dispite contains food;
4) if both food , musician unchecked, li item disappears.
i want without having make new checkbox called 'food musician'. done adding
#itemstofilter li[data-type*='food musician'] {background:pink;} so working checkboxes 'food' , 'musician'.
see or follow example on http://test.kompagniekistemaker.nl
my question raised after reading article kirupa:
https://www.kirupa.com/html5/filtering_items_in_a_list.htm
i found example, kinda want:
filter multiple data attribute elements
winning answer gets bar of chocolate.
lot in advance!
try modifying if statement this:
if (currentitem.getattribute("data-type").indexof(itemtype) !== -1) i'm pretty sure know it's doing. searches substring in data attribute. indexof() returns position of first character of substring if found or -1 if substring not found. solves problem?
Comments
Post a Comment