Показать Hide Div, если класс элемента загружен

Question

Я хочу показать 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>

любая помощь в этом отношении будет оценена.

Answer 1

Код проверяет, имеет ли второй 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>

Примечание: Удалил свойство display из класса nanobar и превратил его в собственный класс.Упрощает скрытие и отображение элемента, а также возможность его повторного использования для других элементов.

Подробнее о classList можно прочитать здесь

Answer 2

Сначала проверьте, можете ли вы найти выбранный класс:

var selected = document.getElementsByClassName("selected");

Затем проверьте, содержит ли эта переменная более одного элемента.

if (selected.length < 1) {

// Hide your nanobar

} else {
// Show it
}

Это не полное решение, если у вас все еще есть проблемы, спрашивайте в комментариях.