Использование массива внутри getElementsByClassName()
Я новичок в javaScript, и я пытался скрыть несколько div, запустив функцию. div существуют, они называются test1 до test8 . каждый раз, когда я активирую функцию, она выдает мне ошибку document.getElementsByClassName(...).style is undefined
вот мой код
var divs = ["test1", "test2", "test3", "test4", "test5", "test6", "test7", "test8"];
for (var i=0; i<divs.length; i++) {
document.getElementsByClassName(divs[i]).style.display = "none";
}
HTML
<div class = "test1">
<p>Hi 1</p>
</div>
<div class = "test2">
<p>Hi 2</p>
</div>
<div class = "test3">
<p>Hi 3</p>
</div>
<div class = "test4">
<p>Hi 4</p>
</div>
<div class = "test5">
<p>Hi 5</p>
</div>
<div class = "test6">
<p>Hi 6</p>
</div>
<div class = "test7">
<p>Hi 7</p>
</div>
<div class = "test8">
<p>Hi 8</p>
</div>
После прочтения повторяющегося вопроса я попробовал это:
function cleardiv() {
var divs = ["test1", "test2", "test3", "test4", "test5", "test6", "test7", "test8"];
var elems = document.getElementsByClassName(divs[i]);
for (var i = 0; i<elems.length; i++) {
elems[i].style.display = 'none';
}
}
getElementsByClassName возвращает массив. Вам нужно работать с первым элементом в нем.
@jmargolisvt Ему нужно работать с элементами все в нем.
@zero298 Zero298 не возвращает массив. Он возвращает список узлов.
@jmargolisvt не возвращает массив. Он возвращает список узлов.
у вас есть лишняя фигурная скобка внутри, пожалуйста, удалите ее
@ScottMarcus не является списком узлов. но HTMLКоллекция :) Разница есть
NB: вызов ваших классов CSS с таким числовым суффиксом может указывать на плохой дизайн. Скорее всего, вам действительно следует использовать одно и то же имя класса.
Ну как мне тогда поступить?
@trincot в реальном коде div называются как-то иначе, но для облегчения понимания я делаю их такими
@jmargolisvt, что ты имеешь в виду?
@kotlet Для всех практических целей нет никакой разницы. Как документы. состояние, название Коллекция HTML по историческим причинам. Эта коллекция содержит узлы и реализует интерфейс списка узлов.
@Barmar, чувак, ты только что пометил мой пост как отмеченный без какой-либо полезной информации, я проверил ссылку, но не нашел того, что хочу, поэтому, пожалуйста, ответь на мой вопрос или удали этот дублирующийся знак
Самый первый ответ на повторяющийся вопрос показывает, что именно вам нужно сделать.
Если вы не можете понять, как включить этот ответ в свой код, опубликуйте то, что вы пробовали, и я снова открою вопрос, чтобы мы могли объяснить, как это исправить.
Это просто var elems = document.getElementsByClassName(divs[i]);, за которым следует цикл for в дубликате.
См. эта рабочий пример для вашего решения. Вы не должны использовать .getElementsByClassName() в первую очередь.
@Barmar Это будет перебирать только 8 списков узлов. При таком подходе ему понадобится вложенный цикл для перебора каждого узла в каждом из списков узлов.
function cleardiv() { var divs = ["test1", "test2", "test3", "test4", "test5", "test6", "test7", "test8"]; var elems = document.getElementsByClassName(divs[i]); for (var i = 0; i<elems.length; i++) { elems[i].style.display = 'none'; } }
@Barmar, спасибо за вашу помощь, но то, что вы мне сказали, почему-то не сработало… я вставил код в комментарий
@AssadRajab Вам не хватает цикла for, который повторяется по divs.
@ScottMarcus Спасибо за вашу помощь, это именно то, что я хотел. это работает спасибо чувак
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Когда вы добавили цикл по элементам в классе, вы удалили цикл по именам классов. Вам нужны вложенные циклы, чтобы получить все.
function cleardiv() {
var divs = ["test1", "test2", "test3", "test4", "test5", "test6", "test7", "test8"];
for (var j = 0; j < divs.length; j++) {
var elems = document.getElementsByClassName(divs[j]);
for (var i = 0; i<elems.length; i++) {
elems[i].style.display = 'none';
}
}
}
Вы также можете сделать это с помощью одного цикла, используя querySelectorAll.
function cleardiv() {
var elems = document.querySelectorAll(".test1,.test2,.test3,.test4,.test5,.test6,.test7,.test8");
for (var i = 0; i<elems.length; i++) {
elems[i].style.display = 'none';
}
}
Хорошо, большое спасибо. но по той ссылке, которую вы прикрепили к моему вопросу, это было неясно, как здесь.
но есть небольшая большая проблема... код записывает обновление в элемент, а не в файл css. поэтому, если я попытаюсь снова отобразить div, он не будет отображаться. как это решить?
Вы действительно хотите навсегда изменить файл на сервере? Это должно быть сделано скриптом сервера.
Если вы хотите динамически изменять правила таблицы стилей в текущем сеансе, см. stackoverflow.com/questions/6620393/…
document.getElementsByClassName(divs[i])возвращает массив, вам нужно установитьstyleэлементов массива по отдельности.