我正在尝试创建一个由复选框触发的过滤器,该复选框显示和隐藏列表中的选项。我尝试过在线使用资源将脚本放在一起,但似乎没有任何效果。
为了隐藏或显示列表项
我正在编辑-class =“ marker”父元素
基于wether-其子元素的class =“ condtx”
是否匹配复选框数组“值”。
我已对自己的进行方式发表了评论。
有人可以指出我的正确方向吗?
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>
答案 0 :(得分:0)
function selectOption(self){
const value = self.value;
unCheckPreviousOption(value);
const element = document.getElementsByClassName(value)[0];
element.classList.remove('marker');
element.classList.add('show');
}
function unCheckPreviousOption(currentCheckbox){
uncheckCheckboxes(currentCheckbox);
const elementsDisplayed = document.getElementsByClassName('show');
if(elementsDisplayed.length){
[...elementsDisplayed].forEach((el) => {
el.classList.remove('show');
el.classList.add('marker');
});
}
}
function uncheckCheckboxes(currentCheckbox){
const checkboxes = document.getElementsByTagName('input');
if(checkboxes.length){
[...checkboxes].forEach((el) => {
if(el.checked && el.value !== currentCheckbox){
el.checked = !el.checked;
}
});
}
}
.show {
display: block;
}
.marker {
display: none;
}
<div id="InputOpts">
<input type="checkbox" onChange="selectOption(this)" value="one">Option 1
<input type="checkbox" onChange="selectOption(this)" value="two">Option 2
<input type="checkbox" onChange="selectOption(this)" value="three">Option 3
<input type="checkbox" onChange="selectOption(this)" value="four">Option 4
</div>
<div class="marker one">
<div class="necessary">
<h3 class="condtn1">Option 1</h3>
</div>
</div>
<div class="marker three">
<div class="necessary">
<h3 class="condtn2">Option 3</h3>
</div>
</div>
<div class="marker two">
<div class="necessary">
<h3 class="condtn1">Option 2</h3>
</div>
</div>
<div class="marker four">
<div class="necessary">
<h3 class="condtn2">Option 4</h3>
</div>
</div>
这可能会帮助您,这是实现您想要做的事情的另一种方式。
答案 1 :(得分:0)
利用onInput函数。这可以用比您少的代码来完成。您可以直接获取元素,而无需遍历复选框和父元素。您还可以添加直接样式,而无需添加CSS类的废话。
我不是100%不确定您想要什么,所以这里有两个例子。
如果要隐藏选定的选项:
function filterCondtn1(event) {
var element = event.target
var condt1 = document.getElementsByClassName("option")
for (var i = 0; i < condt1.length; i++) {
if (condt1[i].innerHTML.toLowerCase() == element.value.toLowerCase()) {
if (element.checked == true) {
condt1[i].parentElement.style = "display:none"
} else {
condt1[i].parentElement.style = "display:block"
}
}
}
}
<div id="InputOpts">
<input type="checkbox" value="option 1" oninput="filterCondtn1(event);">Option 1
<input type="checkbox" value="option 2" oninput="filterCondtn1(event);">Option 2
<input type="checkbox" value="option 3" oninput="filterCondtn1(event);">Option 3
<input type="checkbox" value="option 4" oninput="filterCondtn1(event);">Option 4
</div>
<div class="marker">
<div class="necessary">
<h3 class="option">Option 1</h3>
</div>
</div>
<div class="marker">
<div class="necessary">
<h3 class="option">Option 3</h3>
</div>
</div>
<div class="marker">
<div class="necessary">
<h3 class="option">Option 2</h3>
</div>
</div>
<div class="marker">
<div class="necessary">
<h3 class="option">Option 4</h3>
</div>
</div>
如果您只想显示选定的选项:
function filterCondtn1(event) {
var element = event.target
var condt1 = document.getElementsByClassName("option")
for (var i = 0; i < condt1.length; i++) {
if (condt1[i].innerHTML.toLowerCase() == element.value.toLowerCase()) {
if (element.checked == true) {
condt1[i].parentElement.style = "display:block"
} else {
condt1[i].parentElement.style = "display:none"
}
}
}
}
.marker > .necessary {
display: none;
}
<div id="InputOpts">
<input type="checkbox" value="option 1" oninput="filterCondtn1(event);">Option 1
<input type="checkbox" value="option 2" oninput="filterCondtn1(event);">Option 2
<input type="checkbox" value="option 3" oninput="filterCondtn1(event);">Option 3
<input type="checkbox" value="option 4" oninput="filterCondtn1(event);">Option 4
</div>
<div class="marker">
<div class="necessary">
<h3 class="option">Option 1</h3>
</div>
</div>
<div class="marker">
<div class="necessary">
<h3 class="option">Option 3</h3>
</div>
</div>
<div class="marker">
<div class="necessary">
<h3 class="option">Option 2</h3>
</div>
</div>
<div class="marker">
<div class="necessary">
<h3 class="option">Option 4</h3>
</div>
</div>