如何檢索textContent並在復選框輸入中顯示

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鏈接。

任何幫助，不勝感激。

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為這個問題的答案。