I'm trying to create a filter based that is triggered by checkboxes, which shows and hides options from a list. I have tried to use resources online to put the script together but nothing seems to work.
In order to hide or show list items
I am editing a - class= "marker" parent element
based on wether - class= "condtx" of its child element
is matching the array of checked boxes "value" or not.
I have included comments on how I am proceeding.
Can anyone point me in the right direction please?
function filterCondtn1() {
var i, z;
//"chekedVal" array Keeps returning "undefined" I have no idea why
var chekedVal = document.getElementById("InputOpts").getElementsByTagName("input").checked.value;
//Gathered all <h3> tag options into array to be tested against "chekedVal" for match
var condt1 = document.getElementsByClassName("condtn1").innerHTML;
//Parrent class that will be edited to show <div> or not if True or false.
var parrentClss = document.getElementsByClassName("marker");
//From here it's a blur. I've trying everything I can. I think I should be something of that sort.
for {
(var i = 0; i < condt1.length; i++) &&
(var z = 0; z < parrentClss.length; z++)
RemoveClass(parrentClss[z], "show");
if (condt1[i].indexOf(chekedVal) > -1) AddClass(parrentClss[z], "show");
}
}
//Currently using these two functions in my script and they work
function RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
}
function AddClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
if (arr1.indexOf(arr2[i]) == -1) {
element.className += " " + arr2[i];
}
}
}
.markerA {
display: none;
}
.show {
display: block;
}
<div id="InputOpts">
<input type="checkbox" value="option 1" oninput="filterCondtn1();">Option 1
<input type="checkbox" value="option 2" oninput="filterCondtn1();">Option 2
<input type="checkbox" value="option 3" oninput="filterCondtn1();">Option 3
<input type="checkbox" value="option 4" oninput="filterCondtn1();">Option 4
</div>
<div class="marker">
<div class="necessary">
<h3 class="condtn1">Option 1</h3>
</div>
</div>
<div class="marker">
<div class="necessary">
<h3 class="condtn2">Option 3</h3>
</div>
</div>
<div class="marker">
<div class="necessary">
<h3 class="condtn1">Option 2</h3>
</div>
</div>
<div class="marker">
<div class="necessary">
<h3 class="condtn2">Option 4</h3>
</div>
</div>
Aucun commentaire:
Enregistrer un commentaire