jQuery卡片筛选无结果时无法隐藏全部section-header问题求解

问题原因 #

getElementsByClassName 返回的是 HTMLCollection 类数组对象，包含所有匹配类名的DOM元素，但本身没有style属性，直接操作整个集合的style自然会抛出未定义错误，必须遍历集合内的每个DOM节点单独设置样式。

你已经引入了jQuery，直接用jQuery选择器批量操作元素更简单，不需要单独处理原生集合的遍历逻辑。

修复后的完整代码 #

var $filterCheckboxes = $('input[type="checkbox"]');
$filterCheckboxes.on("change", function () {
  $(".card-grid").show();
  var selectedFilters = {};
  $filterCheckboxes.filter(":checked").each(function () {
    if (!selectedFilters.hasOwnProperty(this.name)) {
      selectedFilters[this.name] = [];
    }
    selectedFilters[this.name].push(this.value);
  });
  var $filteredResults = $(".card");
  $.each(selectedFilters, function (name, filterValues) {
    $filteredResults = $filteredResults.filter(function () {
      var matched = false,
        currentFilterValues = $(this).data("category").split(" ");
      $.each(currentFilterValues, function (_, currentFilterValue) {
        if ($.inArray(currentFilterValue, filterValues) != -1) {
          matched = true;
          return false;
        }
      });
      return matched;
    });
  });
  $(".card").hide().filter($filteredResults).show();
  
  var all_hidden = $(".card:visible").length === 0;
  if (all_hidden) {
    // 无结果时隐藏所有卡片容器和标题，显示无结果提示
    $(".card-grid, .section-header").hide();
    $(".no-results").show();
  } else {
    // 有结果时隐藏无结果提示
    $(".no-results").hide();
    // 逐个判断每个分组是否有可见卡片，控制对应标题的显隐
    $(".card-grid").each(function() {
      var $grid = $(this);
      var $header = $grid.prev(".section-header");
      if ($grid.find(".card:visible").length > 0) {
        $header.show();
        $grid.show();
      } else {
        $header.hide();
        $grid.hide();
      }
    });
  }
});

核心修改点 #

• 用$(".card:visible").length直接判断是否全部卡片隐藏，替代手动遍历判断逻辑，代码更简洁
• 全隐藏场景下直接用jQuery选择器批量隐藏所有.section-header和.card-grid，自动生效所有匹配元素
• 补充了部分分组无结果的逻辑：如果某个卡片组下没有匹配的可见卡片，自动隐藏对应分组的标题，避免出现空标题的问题
• 统一使用jQuery的show()/hide()方法操作显隐，不用手动修改style属性，兼容性更好

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