如何在无对应数据时禁用筛选按钮（添加is-none类）

要实现当分类没有对应内容时自动给筛选按钮添加is-none类，你可以按照以下步骤来完成：

核心思路 #

页面加载完成后，遍历所有分类筛选按钮（排除"All items"按钮），检查每个按钮对应的分类是否存在至少一个filter-simple-item元素。如果不存在匹配的内容，就给按钮添加is-none类，同时可以禁用点击事件避免无效操作。

完整代码示例 #

HTML（保留你原有的结构） #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="button-group">
  <button class="button filter-simple-button is-active" data-filter="all">All items</button>
  <button class="button hollow filter-simple-button" data-filter="category-1">Category 1</button>
  <button class="button hollow filter-simple-button" data-filter="category-2">Category 2</button>
  <button class="button hollow filter-simple-button" data-filter="category-3">Category 3</button>
</div>
<div class="grid-x grid-padding-x">
  <div class="filter-simple-item category-1"> Post #1 in Category 1 </div>
  <div class="filter-simple-item category-1"> Post #2 in Category 1 </div>
  <div class="filter-simple-item category-3"> Post #3 in Category 3 </div>
  <div class="filter-simple-item category-1"> Post #4 in Category 1 </div>
</div>

CSS（定义is-none的样式，可按需调整） #

.is-none {
  /* 可选：直接隐藏按钮 */
  display: none;
  /* 或者选择置灰并禁用交互
  opacity: 0.6;
  pointer-events: none;
  cursor: not-allowed;
  */
}

JavaScript（整合检查逻辑与原有功能） #

$(document).ready(function() {
  // 新增：检查分类按钮是否有对应内容，无则添加is-none类
  $('.filter-simple-button').not('[data-filter="all"]').each(function() {
    const filterValue = $(this).attr('data-filter');
    // 判断对应分类的项目数量
    if ($(`.filter-simple-item.${filterValue}`).length === 0) {
      $(this).addClass('is-none').prop('disabled', true);
    }
  });

  /* 原有：显示和隐藏筛选后的项目 */
  $(".filter-simple-button").click(function() {
    var value = $(this).attr('data-filter');
    if (value === "all") {
      $('.filter-simple-item').show('1000');
    } else {
      $(".filter-simple-item").not('.' + value).hide('3000');
      $('.filter-simple-item').filter('.' + value).show('3000');
    }
  });

  /* 原有：切换筛选按钮的active类 */
  $('.filter-simple-button').click(function() {
    $(this).siblings().removeClass('is-active');
    $(this).addClass('is-active');
  });
});

逻辑说明 #

• 用$(document).ready()确保DOM完全加载后再执行检查操作，避免找不到元素的问题
• 通过.not('[data-filter="all"]')跳过"All items"按钮，只检查分类按钮
• 利用$('.filter-simple-item.' + filterValue).length判断对应分类的项目数量，为0时添加is-none类并禁用按钮
• 你可以根据需求灵活调整is-none的CSS样式，比如直接隐藏按钮，或者仅仅置灰并禁止点击

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