Показать скрыть Div, если класс элемента загружен
Я хочу показать div, если загружен другой класс div.
Показывать nanobar, только если класс selected загружен, в противном случае nanobar станет скрытым
пример кода css:
.nanobar {
height: 75px;
width: 100%;
background: #fef9c7;
border:1px solid #fce181;
color:#333;
padding:10px;
margin-bottom:10px;
font-size: 1.2rem;
display:none;
}
Пример HTML-кода:
<div class = "nanobar">
<span>Content</span>
</div>
<div id = "category_container" class = "content-padding {if $category} selected{/if}"> </div>
любая помощь в этом отношении будет оценена по достоинству.
Я пытаюсь с этим w3schools.com/howto/howto_js_toggle_hide_show.asp
Итак... что мешает вам использовать образцы этой страницы? Чтобы было ясно: на этом сайте мы не пишем для вас целую функцию бесплатно, мы помогаем вам найти и исправить ваши ошибки. Если кода нет, то и решения нет. Вы не можете просто прийти сюда и сказать: «Я хочу сделать это, как это сделать?». Вы должны показать свой глючный код и спросить, почему он не работает.
@sjahan Я новичок, если буду знать, то помощи не попрошу...
Я прекрасно понимаю, что вы новичок. Дело в том, что даже если вы новичок, это не то место, где вы можете попросить кого-то другого сделать вашу работу/домашнюю работу. Вы можете показать свой код и спросить, почему это не работает, но вы не можете попросить кодировать других, чтобы они написали код вместо вас.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Сначала проверьте, можете ли вы найти выбранный класс:
var selected = document.getElementsByClassName("selected");
Затем проверьте, имеет ли эта переменная более одного элемента.
if (selected.length < 1) {
// Hide your nanobar
} else {
// Show it
}
Это не полное решение, если у вас все еще есть проблемы, спрашивайте в комментариях.
Или, если вы хотите обнаружить только «выбранный» класс в этом конкретном div, if (document.getElementById("category_container").classList.contains("selected")){ document.getElementsByClassName("nanobar")[0].style.display = "block"; }. Элементы имеют свойство classList, которое имеет метод contains (developer.mozilla.org/en-US/docs/Web/API/Element/classList). Метод getElementsByClassName (в данном случае объекта документа) возвращает NodeList, и мы используем [0] для получения первого (и, возможно, единственного) узла из списка (developer.mozilla.org/en-US/docs/Web/API/NodeList)
Что ж, вы правы, но если это должно быть конкретным, я бы просто использовал идентификатор category_container и проверил, имеет ли он выбранный класс.
Это то, что я сделал :) Я просто объяснял, как работает метод (и ссылался на почетный MDN) для OP, потому что они сказали, что они новые.
Код проверяет, имеет ли второй div класс selected. Если это так, будет отображаться первый div, в противном случае первый div останется скрытым.
let divElements = document.querySelectorAll('div');
if (divElements[1].classList.contains("selected")) {
divElements[0].classList.replace("hide", "show");
} else {
divElements[0].classList.replace("show", "hide");
}.nanobar {
height: 75px;
width: 100%;
background: #fef9c7;
border:1px solid #fce181;
color:#333;
padding:10px;
margin-bottom:10px;
font-size: 1.2rem;
}
.hide {
display: none;
}
.show {
display: block;
}<div class = "nanobar hide">
<p>Hello</p>
</div>
<div class = "apple jason selected hide">
<p>Jason</p>
</div>Примечание: Свойство отображения удалено из класса nanobar и превращено в отдельный класс. Упрощает скрытие и отображение элемента, а также возможность повторного использования его для других элементов.
Вы можете узнать больше о classListздесь
Хорошо, но на самом деле они пытаются скрыть «нанобар» и показать его, только если у другого div есть класс, называемый «выбранным». Лучший способ проверить это, вероятно, с classList.contains() вместо className=, чтобы разрешить более одного класса для элемента. Я также думаю, что выбор по tagName (например, .querySelectorAll("div")) может быть немного хрупким, а это означает, что если будет добавлен еще один div, это может сломать ваш код. Просто мои мысли.
Если вы не совсем поняли вопрос, получите некоторые разъяснения, задавая вопросы в комментариях. Это поможет вам написать хороший ответ, а также поможет ОП отредактировать вопрос, чтобы сделать его лучше.
Что мешает вам делать то, что вы хотите? Что вы пробовали?