[英]How to retrieve textContent and display on checkbox input
我正在尝试构建一个小程序,您可以使用输入字段将数据输入其中,以构建一组包含列表项的无序列表。
我有一个复选框,当选中它时,我希望它显示包含该文本位(在本例中为atlanta)的整个无序列表。 我希望将不包含此文本的其余无序列表设置为display: none;
for循环是个问题,尽管我整天都在玩,但无法表现出我想要的行为。
我相信这是有问题的代码:
checkboxInput.addEventListener('change', (e) => {
const isChecked = e.target.checked;
let ulList = document.getElementsByTagName('ul');
let liList = document.getElementsByTagName('li');
let locationList = document.getElementsByClassName('location');
if (isChecked) {
for (let i = 0; i < ulList.length; i += 1) {
for (let j = 0; j < liList.length; j += 1) {
let ul = ulList[i];
let li = liList[i];
if (li.textContent == 'atlanta') {
ul.style.display = '';
} else {
ul.style.display = 'none';
}
}
}
}
});
请在此处查看jsFiddle链接。
任何帮助,不胜感激。
我声明的几个变量在这段代码中是不必要的。 liList
变量已替换为ulList.children
。 第二个for循环也没有必要。 这是更改的eventListener,以实现我所需的功能。
checkboxInput.addEventListener('change', (e) => {
const isChecked = e.target.checked;
let ulList = document.getElementsByTagName('ul');
if (isChecked) {
for (let i = 0; i < ulList.length; i += 1) {
let ul = ulList[i];
let liList = ul.children;
let li = liList[1];
if (li.textContent == 'atlanta') {
ul.style.display = 'block';
} else {
ul.style.display = 'none';
}
}
}
});
感谢Treehouse的Kris为这个问题的答案。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.