Как получить textContent и отобразить при вводе флажка - PullRequest
Новая
       19

Как получить textContent и отобразить при вводе флажка

0 голосов
/ 11 октября 2018

Я пытаюсь создать небольшую программу, в которую вы вводите данные, используя поля ввода для создания набора неупорядоченных списков, содержащих элементы списка.

У меня есть флажок, который при проверке я бынапример, чтобы отобразить весь неупорядоченный список, содержащий этот бит текста, в данном случае Атланта.Мне бы хотелось, чтобы остальные неупорядоченные списки, которые не содержат этот текст, были установлены на 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 здесь .

Любая помощь высоко ценится.

1 Ответ

0 голосов
/ 12 октября 2018

Несколько переменных, которые я объявил, не нужны в этом фрагменте кода.Переменная 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';
            }

        }
    } 
});

Спасибо Kris от Treehouse за ответ на эту проблему.

...