Функция JS для скрытия постов в блоге
Я создал блог-сайт с 3 основными категориями: инвестиции, деньги и выход на пенсию. Я добавил элемент класса, соответствующий каждой категории темы. Я пытаюсь создать функции JS, которые при нажатии скрывают две другие категории (я делаю это, чтобы не иметь домашнюю страницу для каждой категории). Вот одна из функций, позволяющая отобразить категорию «Пенсия», скрывая категории «Инвестиции» и «Деньги»:
function showRetirement() {
var abc = document.getElementsByClassName("Investing, Money");
for (var abc2 = 0; abc2 < abc.length; abc2++) {
abc[abc2].style.display = "none";
}
}
Излишне говорить, что это не работает. Скобки говорят, что функция «определена, но никогда не используется». Также говорится, что var abc «документ не определен».
Это моя ссылка на функцию:
<div class = "nav-link" onclick = "showRetirement()">Retirement</div>
Спасибо!!!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Добро пожаловать в SO Dan.
getElementsByClassName не позволяет получать данные по нескольким именам классов за один вызов.
Вместо этого будет проще использовать метод document.querySelectorAll(), который позволяет использовать селекторы запросов для выбора элементов со страницы.
Селектор запроса для выбора всех элементов с классом Investing ИЛИ Money будет выглядеть так:
.Investing, .Money
В качестве примечания, предупреждения в вашем редакторе скобок на этом этапе можно игнорировать, редактор не понимает, что вы вызываете эту функцию из обработчика onClick = "", и поэтому считает, что функция не используется.
Еще одно замечание: переменную i принято использовать в циклах for, другим программистам будет легче понять, для чего используется эта переменная.
Пример решения с использованием querySelectorAll
function showRetirement() {
var elements = document.querySelectorAll(".Investing, .Money");
for (var i = 0; i < elements.length; i++) {
elements[i].style.display = "none";
}
}
Также, наверное, стоит показать здесь элементы с классом Retirement, после того как мы скроем остальные:
function showRetirement() {
var elementsToHide = document.querySelectorAll(".Investing, .Money");
for (var i = 0; i < elementsToHide.length; i++) {
elementsToHide[i].style.display = "none";
}
var elementsToShow = document.querySelectorAll(".Retirement");
for (var i = 0; i < elementsToShow.length; i++) {
elementsToShow[i].style.display = "block";
}
}
function showRetirement(){
var ar_el;
ar_el = document.getElementsByClassName("Investing");
for (var i = 0; i < ar_el.length; i++)
ar_el[i].style.display = "none";
ar_el = document.getElementsByClassName("Money");
for (var i = 0; i < ar_el.length; i++)
ar_el[i].style.display = "none";
ar_el = document.getElementsByClassName("Retirement");
for (var i = 0; i < ar_el.length; i++)
ar_el[i].style.display = "block";
}