如果已加載元素類，則顯示隱藏 Div

Question

如果加載了另一個 div 類，我想顯示該 div。 僅當加載selected類時才顯示nanobar否則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

首先檢查是否可以找到選定的類：

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

然后檢查這個變量是否有多個元素。

if (selected.length < 1) {

// Hide your nanobar

} else {
// Show it
}

這不是完整的解決方案，如果您仍有問題，請在評論中提問。

Answer 2

該代碼檢查第二個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類中刪除了 display 屬性並將其放入它自己的類中。 使隱藏和顯示元素更容易，並且能夠將其重用於其他元素。

您可以在此處閱讀有關classList更多信息