为何筛选结果为空时错误消息不显示？技术求助

搭建了测试店铺并配置基础筛选功能，期望某一筛选条件返回空结果时显示错误提示。点击标注“This will not work”的按钮后页面为空，但错误消息未按预期显示，仅初始状态下能显示。相关代码如下，请问哪里出错了？

let message = $("p");
message.hide();

$('.filter-list button').click(function() {
  $(this).toggleClass('active');

  let filterArr = $(".filter-list button.active").map(function() {
    return $(this).data('filter');
  });

  let filterItem = $(".item");

  if (filterArr.length <= 0) {
    filterItem.show();
    message.show();
  } else {
    filterItem.hide();
    message.hide();
    filterItem.each(function() {
      for (let i = 0; i < filterArr.length; i++) {
        if ($(this).hasClass(filterArr[i])) {
          $(this).show();
        }
      }
    });
  }
});
$('.clear-all').click(function() {
  message.hide();
  $('.filter-list button').removeClass('active');
  $(".item").show();
});

body {
  background-color: #ccc;
  font-family: arial;
}

button {
  background-color: #fff;
  border: 0;
  padding: 1rem;
  margin-right: 5px;
}

.content-control {
  background-color: #eee;
  display: flex;
}

.grid {
  display: flex;
}

.item {
  background-color: #f1f1f1;
  width: 200px;
  height: 200px;
  margin: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap md-5">
  <h1>Test shop filters</h1>
  <div class="content-control filter-control">
    <div class="filter-list">
      <button class="filter-btn" data-filter="filter1">Filter 1</button>
      <button class="filter-btn" data-filter="filter2">Filter 2</button>
      <button class="filter-btn" data-filter="filter3">Filter 3</button>
      <button class="filter-btn" data-filter="filter4">Filter 4</button>
      <button class="filter-btn" data-filter="filter6">This will not work</button>
    </div>
    <button class="clear-all">Clear all</button>
  </div>
  <div class="filter-content">
    <div class="grid">
      <div class="item filter1">filter1</div>
      <div class="item filter1">filter1</div>
      <div class="item filter2">filter2</div>
      <div class="item filter2">filter2</div>
      <div class="item filter3">filter3</div>
      <div class="item filter3">filter3</div>
      <div class="item filter4">filter4</div>
      <div class="item filter4">filter5</div>
      <div class="item filter5">filter5</div>
    </div>
    <p>Error this filter does not exist</p>
  </div>
</div>

• 代码在存在筛选条件时，直接默认隐藏错误消息，没有判断筛选后是否有可见的项目。
• 点击无效筛选按钮（如filter6）时，所有item都会被隐藏，但代码未检查最终是否有显示的项目，导致错误消息始终无法触发显示。
• 初始状态的逻辑错误：无筛选条件时不需要显示错误消息，但原代码却设置了message.show()。

修改JavaScript逻辑，在筛选完成后检查是否有可见的item，如果没有则显示错误消息，同时修正初始状态的错误逻辑：

let message = $("p");
message.hide();

$('.filter-list button').click(function() {
  $(this).toggleClass('active');

  let filterArr = $(".filter-list button.active").map(function() {
    return $(this).data('filter');
  });

  let filterItem = $(".item");

  if (filterArr.length <= 0) {
    filterItem.show();
    message.hide(); // 无筛选条件时隐藏错误消息
  } else {
    filterItem.hide();
    message.hide();
    filterItem.each(function() {
      for (let i = 0; i < filterArr.length; i++) {
        if ($(this).hasClass(filterArr[i])) {
          $(this).show();
        }
      }
    });
    // 新增：检查筛选后是否有可见项目，无则显示错误
    if ($('.item:visible').length === 0) {
      message.show();
    }
  }
});
$('.clear-all').click(function() {
  message.hide();
  $('.filter-list button').removeClass('active');
  $(".item").show();
});

关键改动说明 #

1. 修正初始状态逻辑：无筛选条件时隐藏错误消息，符合正常页面展示逻辑。
2. 新增筛选后检查：通过$('.item:visible').length统计可见项目数量，若为0则触发错误提示显示，满足空结果时的需求。

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