Question

我正在尝试构建一个小程序，您可以使用输入字段将数据输入其中，以构建一组包含列表项的无序列表。

我有一个复选框，当选中该复选框时，我希望它显示包含该段文字的整个无序列表，在本例中为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链接here。

非常感谢任何帮助。

Answer 1

在这段代码中，我声明的几个变量是不必要的。 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对此问题的解答。

如何检索textContent并在复选框输入中显示

1 个答案: