Я не уверен, что я вообще ошибаюсь, или просто не хватает второстепенного. У меня есть страница, которая имеет разделы, подразделы и подсекции. Последние - это элементы, которые имеют общее форматирование:
<select id="SubSubFlood" class='hidden'>
<option></option>
</select>
<select id="SubSubHome" class='hidden'>
<option></option>
</select>
Я не могу назвать каждый из них явно, потому что они динамически генерируются, но все они начинаются с «SubSub». Я пытаюсь создать код, который изменит весь SubSubs к классу = «скрытый», а затем изменить один, я хочу, чтобы быть видимым класс = «нескрываемого». Вот моя попытка:
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» до класса = «скрытый»?
Всего 3 ответа
SubSub
будет содержать массив, подобный объекту , поэтому, когда вы помещаете его в for each
цикл, вы будете перечислять его свойства, а не сами элементы. Таким образом, элемент в цикле не будет первым выбором, это будет 0
. Я предлагаю изменить его на нормальный цикл
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
класс?
Это отвечает на вопрос:
Как получить JavaScript для изменения каждого тега с идентификатором, который начинается с «SubSub» до класса = «скрытый»?
[...document.querySelectorAll('[id^="SubSub"]')].forEach(section => section.className.add('hidden'))
достигнет именно этого.
Итак, давайте сломаем это:
Прежде всего используйте селектор атрибутов, который соответствует всем элементам, которые имеют значение id
начиная с SubSub
: [id^="SubSub"]
.
Запросите документ для всех этих document.querySelectorAll('[id^="SubSub"]')
: document.querySelectorAll('[id^="SubSub"]')
Распространяйте NodeList
с NodeList
вы попадаете в array
используя ...
(оператор распространения):
[...document.querySelectorAll('[id^="SubSub"]')]
Кроме того, вы также можете использовать Array.from(iterable)
:
Array.from(document.querySelectorAll('[id^="SubSub"]'))
так что это кросс-браузер безопасно использовать forEach
по результату:
[...document.querySelectorAll('[id^="SubSub"]')].forEach((section) => {})
В этом цикле просто добавьте имя класса в classList
:
section.className.add('hidden')
Проблема в том, что getElementsByTagName
возвращает HTMLCollection
который «не работает» с «in-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>