如何在所有div元素隐藏时显示‘无结果’提示信息？

我有一个展示若干div元素的电商网页，页面中使用过滤器筛选特定商品。现在我希望当所有div元素的display属性设为none时，显示「无结果」提示信息。我该如何实现？

我尝试了如下代码，但无法正常运行：

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

以下是我的页面相关代码：

JavaScript代码 #

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'),
  );
}

HTML代码 #

<div id="filters">
  <div id="myBtnContainer">
    <p>时期</p>
    <button data-filter="Barok" class="btn">巴洛克</button>
    <button data-filter="Classic" class="btn">古典</button>
    <button data-filter="Renaissance" class="btn">文艺复兴</button>
    <button data-filter="Romantic" class="btn">浪漫主义</button>
  </div>
  <div id="myBtnContainer">
    <p>作曲家</p>
    <button data-filter="DiLasso" class="btn">德·拉索</button>
    <button data-filter="Bach" class="btn">巴赫</button>
    <button data-filter="Vivaldi" class="btn">维瓦尔第</button>
    <button data-filter="Schubert" class="btn">舒伯特</button>
    <button data-filter="Tchaikovsky" class="btn">柴可夫斯基</button>
  </div>
</div>
<div class="container" id="myUL">
  <div class="filterDiv Renaissance DiLasso">德·拉索 - 《圣彼得的眼泪》</div>
  <div class="filterDiv Renaissance">斯韦林克 - 《幻想曲》</div>
  <div class="filterDiv Classic">海顿 - 《四季》</div>
  <div class="filterDiv Romantic">瓦格纳 - 《帕西法尔》</div>
  <div class="filterDiv Classic">莫扎特 - 《安魂曲》</div>
  <div class="filterDiv Barok Bach">巴赫 - 《Magnificat》</div>
  <div class="filterDiv Classic">贝多芬 - 《第五交响曲》</div>
  <div class="filterDiv Barok">亨德尔 - 《哈利路亚》</div>
  <div class="filterDiv Barok Vivaldi">维瓦尔第 - 《四季》</div>
  <div class="filterDiv Renaissance">奥布雷赫特 - 《Factor Orbis》</div>
  <div class="filterDiv Romantic Schubert">舒伯特 - 《魔王》</div>
  <div class="filterDiv Romantic Tchaikovsky">柴可夫斯基 - 《天鹅湖》</div>
  <div class="filterDiv Barok Vivaldi">维瓦尔第 - 《Rosmira》</div>
  <div class="filterDiv Classic">贝多芬 - 《月光奏鸣曲》</div>
</div>

原代码问题分析 #

1. $('filters')(':visible')语法错误，且混用了jQuery和原生JS，但项目未引入jQuery依赖
2. document.textContent('No results')完全错误：document没有textContent()方法，也未指定文本插入的目标元素

实现步骤 #

1. 添加无结果提示元素：在商品容器#myUL内添加一个默认隐藏的提示div，确保布局统一：

<div class="container" id="myUL">
  <!-- 原有商品div保持不变 -->
  <div class="no-results" style="display: none;">无结果</div>
</div>

2. 修改筛选函数逻辑：每次筛选后统计可见商品数量，动态控制提示的显示/隐藏：

const buttons = document.querySelectorAll('.btn');
const composers = document.querySelectorAll('.filterDiv');
// 获取无结果提示元素
const noResults = document.querySelector('.no-results');

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,
  );
  
  // 统计可见商品数量
  let visibleCount = 0;
  composers.forEach((c) => {
    const shouldShow = filters.length === 0 || c.matches(`.${filters.join('.')}`);
    c.style.display = shouldShow ? 'block' : 'none';
    if (shouldShow) visibleCount++;
  });
  
  // 根据数量切换提示显示状态
  noResults.style.display = visibleCount === 0 ? 'block' : 'none';
}

补充说明 #

• 可给.no-results添加CSS样式优化显示效果，比如居中对齐、内边距、字体样式等
• 若一定要用jQuery实现（非必要），正确写法如下：

if ($('#myUL .filterDiv:visible').length === 0) {
  $('.no-results').show();
} else {
  $('.no-results').hide();
}

但原生JS已足够实现需求，无需额外引入jQuery库。

内容的提问来源于stack exchange，提问作者user19201574