Проблема с JavaScript-коллекцией элементов документа - PullRequest
Новая
       10

Проблема с JavaScript-коллекцией элементов документа

0 голосов
/ 21 ноября 2018

Я не уверен, что я на неправильном курсе или просто пропускаю незначительный бит.У меня есть страница с разделами, подразделами и подразделами.Последние являются элементами, которые имеют общее форматирование: 

<select id="SubSubFlood"  class='hidden'>
    <option></option>
</select>
<select id="SubSubHome"  class='hidden'>
    <option></option>
</select>

Я не могу назвать каждый явно, потому что они динамически генерируются, но все они начинаются с «SubSub».Я пытаюсь создать код, который изменит все подсабы на class = 'hidden', а затем поменяет тот, который я хочу, чтобы он был виден для class = 'unhidden'.Вот моя попытка: 

function ShowSubSub(SelectID) {
    var SubSub = document.getElementsByTagName("Select");
    var item;
    for (item in SubSub) {
        if (item.ID.match(/SubSub.*/)) {            
            item.className = 'hidden';
        }
    }
    item = document.getElementById(SelectID);
    item.className = 'unhidden';
}

Где я скучаю по лодке?Как получить JavaScript для изменения каждого тега с идентификатором, который начинается с «SubSub» на class = «hidden»?

Ответы [ 3 ]

0 голосов
/ 21 ноября 2018

Это отвечает на вопрос:

Как мне получить JavaScript для изменения каждого тега с идентификатором, который начинается с "SubSub" на class = "hidden"? 

[...document.querySelectorAll('[id^="SubSub"]')].forEach(section => section.className.add('hidden'))

достигнет именно этого.

Итак, давайте разберемся с этим:

  1. Прежде всего используйте селектор атрибута, который соответствует всем элементам, которые имеют id значение, начинающееся с SubSub: [id^="SubSub"].

    Запрос документа для всех этих: document.querySelectorAll('[id^="SubSub"]')

  2. Распространение NodeList, в которое вы попадаетеarray с использованием ... (оператор распространения): 

    [...document.querySelectorAll('[id^="SubSub"]')]

    В качестве альтернативы, вы также можете использовать Array.from(iterable): 

    Array.from(document.querySelectorAll('[id^="SubSub"]'))

  3. , так что это крест-браузер безопасно использовать forEach для результата: 

    [...document.querySelectorAll('[id^="SubSub"]')].forEach((section) => {})

  4. В этом цикле просто добавьте имя класса в classList: 

    section.className.add('hidden')
0 голосов
/ 21 ноября 2018

Проблема в том, что getElementsByTagName возвращает HTMLCollection, которые "не работают" с for-in, вместо этого используйте 

for (let i =0; i<SubSub.length; i++) {
    let item = SubSub[i];
    if (item.id.match(/SubSub.*/)) {            
        item.className = 'hidden';
    }
}


function ShowSubSub(SelectID) {
    var SubSub = document.getElementsByTagName("Select");
    console.log(SubSub);
    for (let i =0; i<SubSub.length; i++) {
        let item = SubSub[i];
        if (item.id.match(/SubSub.*/)) {            
            item.className = 'hidden';
        }
    }
    item = document.getElementById(SelectID);
    console.log(item);
    item.className = 'unhidden';
}

ShowSubSub('SubSubHome');
.hidden {
  background: red;
}

.unhidden {
  background: blue;
}
<select id="SubSubFlood" >
    <option></option>
</select>
<select id="SubSubHome"  >
    <option></option>
</select>

Я также разработал небольшое улучшение для решения connexo : 

function ShowSubSub(SelectID) 
{
      [...document.querySelectorAll('[id^="SubSub"]')].map(s => 
        s.id==SelectID ? s.className=('unhidden') : s.className=('hidden')
    )
}

ShowSubSub('SubSubHome');


   function ShowSubSub(SelectID) 
{
	  [...document.querySelectorAll('[id^="SubSub"]')].map(s => 
    	s.id==SelectID ? s.className=('unhidden') : s.className=('hidden')
    )
}

ShowSubSub('SubSubHome');
.hidden {
  background: red;
}

.unhidden {
  background: blue;
}
<select id="SubSubFlood" >
    <option></option>
</select>
<select id="SubSubHome"  >
    <option></option>
</select>
0 голосов
/ 21 ноября 2018

SubSub будет содержать массив , такой как объект , поэтому, когда вы поместите его в цикл for each, вы будете перечислять его свойства, а не сами элементы.Таким образом, элемент в цикле не будет первым выбором, это будет 0.Я предлагаю изменить его на обычный for цикл 

function ShowSubSub(SelectID) {
  var SubSub = document.getElementsByTagName("Select");
  var item;
  for (var i =0; i < SubSub.length; i++) {
    if (SubSub[i].id.match(/SubSub.*/)) {
      SubSub[i].className = 'hidden';
    }
  }
  item = document.getElementById(SelectID);
  item.className = 'unhidden';
}

ShowSubSub('SubSubHome')
.hidden{

display:none;
}
<select id="SubSubFlood" class='hidden'>
  <option>Flood</option>
</select>
<select id="SubSubHome" class='hidden'>
  <option>Home</option>
</select>

PS Есть ли причина для наличия класса unhidden, не могли бы вы просто удалить класс hidden?

...