javascript - 当所有 div 都被隐藏时，如何显示消息 "no results"？

Question

我有一个显示了一些 div 的网页。网上商店使用一些过滤器来过滤特定项目。现在，如果所有 div 都有 display:none，我想显示消息“无结果”。

我该怎么做？

我尝试了一些东西，比如:

if ($('filters')(':visible').length == 0) {
  document.textContent('No results');
}

但这不起作用。

const buttons = document.querySelectorAll('.btn');
const composers = document.querySelectorAll('.filterDiv');

buttons.forEach((btn) =>
  btn.addEventListener('click', (e) => {
    e.target.classList.toggle('active');
    filterSelection();
  }),
);

function filterSelection() {
  const filters = [...document.querySelectorAll('.btn.active')].map(
    (el) => el.dataset.filter,
  );
  composers.forEach(
    (c) =>
    (c.style.display =
      filters.length === 0 || c.matches(`.${filters.join('.')}`) ?
      'block' :
      'none'),
  );
}

<div id="filters">
  <div id="myBtnContainer">
    <p>Period</p>
    <button data-filter="Barok" class="btn">Barok</button>
    <button data-filter="Classic" class="btn">Classic</button>
    <button data-filter="Renaissance" class="btn">Renaissance</button>
    <button data-filter="Romantic" class="btn">Romantic</button>
  </div>
  <div id="myBtnContainer">
    <p>Composer</p>
    <button data-filter="DiLasso" class="btn">De Lassus</button>
    <button data-filter="Bach" class="btn">Bach</button>
    <button data-filter="Vivaldi" class="btn">Vivaldi</button>
    <button data-filter="Schubert" class="btn">Schubert</button>
    <button data-filter="Tchaikovsky" class="btn">Tchaikovsky</button>
  </div>
</div>
<div class="container" id="myUL">
  <div class="filterDiv Renaissance DiLasso">Di Lasso -Lagrime de San Pietro</div>
  <div class="filterDiv Renaissance">Sweelinck - Fantasie</div>
  <div class="filterDiv Classic">Haydn - The Seasons</div>
  <div class="filterDiv Romantic">Wagner - Parsifal</div>
  <div class="filterDiv Classic">Mozart - Requiem</div>
  <div class="filterDiv Barok Bach">Bach - Magnificat</div>
  <div class="filterDiv Classic">Beethoven - Symphony 5</div>
  <div class="filterDiv Barok">Händel - Hallelujah</div>
  <div class="filterDiv Barok Vivaldi">Vivaldi - The Four Seasons</div>
  <div class="filterDiv Renaissance">Obrecht - Factor Orbis</div>
  <div class="filterDiv Romantic Schubert">Schubert - Erlkönig</div>
  <div class="filterDiv Romantic Tchaikovsky">Tchaikovsky - Swan Lake</div>
  <div class="filterDiv Barok Vivaldi">Vivaldi - Rosmira</div>
  <div class="filterDiv Classic">Beethoven - Moonlight Sonata</div>
</div>

Answer 1

您可以通过.filterDiv.hidden 使用一个类来控制您的隐藏元素(如果元素是隐藏的，它们将有一个类hidden)。

这种方法需要有 CSS 样式

.hidden {
   display: none;
}

const buttons = document.querySelectorAll('.btn');
const composers = document.querySelectorAll('.filterDiv');

buttons.forEach((btn) =>
  btn.addEventListener('click', (e) => {
    e.target.classList.toggle('active');
    filterSelection();
  }),
);

function filterSelection() {
  const filters = [...document.querySelectorAll('.btn.active')].map(
    (el) => el.dataset.filter,
  );
  composers.forEach((c) => {
    if (filters.length === 0 || c.matches(`.${filters.join('.')}`)) {
      c.classList.remove("hidden")
    } else {
      c.classList.add("hidden")
    }
  });

  const hiddenComposers = document.querySelectorAll('.filterDiv.hidden');

  const noResultElement = document.getElementById("noResult");

  if (composers.length === hiddenComposers.length) {
    noResultElement.classList.remove("hidden");
  } else {
    noResultElement.classList.add("hidden");
  }
}

.hidden {
  display: none;
}

<div id="filters">
  <div id="myBtnContainer">
    <p>Period</p>
    <button data-filter="Barok" class="btn">Barok</button>
    <button data-filter="Classic" class="btn">Classic</button>
    <button data-filter="Renaissance" class="btn">Renaissance</button>
    <button data-filter="Romantic" class="btn">Romantic</button>
  </div>
  <div id="myBtnContainer">
    <p>Composer</p>
    <button data-filter="DiLasso" class="btn">De Lassus</button>
    <button data-filter="Bach" class="btn">Bach</button>
    <button data-filter="Vivaldi" class="btn">Vivaldi</button>
    <button data-filter="Schubert" class="btn">Schubert</button>
    <button data-filter="Tchaikovsky" class="btn">Tchaikovsky</button>
  </div>
</div>
<div class="container" id="myUL">
  <div class="filterDiv Renaissance DiLasso">Di Lasso -Lagrime de San Pietro</div>
  <div class="filterDiv Renaissance">Sweelinck - Fantasie</div>
  <div class="filterDiv Classic">Haydn - The Seasons</div>
  <div class="filterDiv Romantic">Wagner - Parsifal</div>
  <div class="filterDiv Classic">Mozart - Requiem</div>
  <div class="filterDiv Barok Bach">Bach - Magnificat</div>
  <div class="filterDiv Classic">Beethoven - Symphony 5</div>
  <div class="filterDiv Barok">Händel - Hallelujah</div>
  <div class="filterDiv Barok Vivaldi">Vivaldi - The Four Seasons</div>
  <div class="filterDiv Renaissance">Obrecht - Factor Orbis</div>
  <div class="filterDiv Romantic Schubert">Schubert - Erlkönig</div>
  <div class="filterDiv Romantic Tchaikovsky">Tchaikovsky - Swan Lake</div>
  <div class="filterDiv Barok Vivaldi">Vivaldi - Rosmira</div>
  <div class="filterDiv Classic">Beethoven - Moonlight Sonata</div>
</div>
<div id="noResult" class="hidden">No result</div>