使用jQuery实现多数据属性筛选功能失效，请求故障排查

故障核心原因 #

你的筛选功能失效主要有以下几个关键问题：

• 筛选值获取完全错误
  原代码中$(this).each()仅遍历当前点击的单个<a>标签，且用val()方法取值——但<a>标签并没有value属性，你的筛选值实际存在data-platform/data-genre自定义属性中，导致category_list始终为空或存入undefined，根本无法拿到有效筛选条件。

• 筛选逻辑混乱
  你把平台和类型两种不同维度的筛选条件塞进同一个数组，然后要求元素的平台和类型同时匹配这个数组里的内容，这完全不符合多维度筛选的逻辑（应该分别判断平台是否符合平台筛选条件、类型是否符合类型筛选条件）。

• 目标元素选择错误
  原代码遍历的是.filtered-content（整个父容器行），但实际带有data-platform/data-genre属性的是里面的.object子元素，父容器没有这些属性，自然无法匹配。

• 未阻止默认跳转行为
  点击<a>标签时会触发默认的锚点跳转（href="#"），导致页面滚动到顶部，筛选逻辑的效果被直接重置。

修复后的完整代码 #

JavaScript部分

$(document).ready(function() {
  // 切换选中状态
  $(".filters-1 li").click(function() {
    $(".filters-1 li").removeClass("active");
    $(this).addClass("active");
  });

  $(".filters-2 li").click(function() {
    $(".filters-2 li").removeClass("active");
    $(this).addClass("active");
  });

  $('.filters ul li a').on('click', function(e) {
    // 阻止a标签默认跳转
    e.preventDefault();

    // 获取当前选中的平台筛选条件
    let selectedPlatform = $(".filters-1 .active a").data("platform");
    // 如果是ALL，则平台条件为null（表示不限制）
    if ($(".filters-1 .active a").data("reset") === "platform") {
      selectedPlatform = null;
    }

    // 获取当前选中的类型筛选条件
    let selectedGenre = $(".filters-2 .active a").data("genre");
    if ($(".filters-2 .active a").data("reset") === "genre") {
      selectedGenre = null;
    }

    // 遍历所有需要筛选的元素
    $('.filtered-content .object').each(function() {
      const itemPlatform = $(this).data("platform");
      const itemGenre = $(this).data("genre");

      // 判断是否符合筛选条件：平台匹配（或不限制）且类型匹配（或不限制）
      const platformMatch = !selectedPlatform || itemPlatform === selectedPlatform;
      const genreMatch = !selectedGenre || itemGenre === selectedGenre;

      if (platformMatch && genreMatch) {
        $(this).fadeIn('slow');
      } else {
        $(this).hide();
      }
    });
  });
});

CSS部分

.list-group-item a {
  text-decoration: none;
  color: grey;
}

.active {
  background: pink!important;
  border-color: red!important;
  transition: background-color 200ms linear;
}

.active a {
  color: #fff;
  font-weight: bold;
}

HTML部分

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/css/bootstrap.min.css">
<div class="container py-3">
  <div class="row filters">
    <div class="col">
      <p>Type filters</p>
      <ul class="list-group list-group-horizontal filters-1" data-filter="platform">
        <li class="list-group-item active">
          <a href="#" data-reset="platform">ALL</a>
        </li>
        <li class="list-group-item">
          <a href="#" data-platform="dvd">DVDs</a>
        </li>
        <li class="list-group-item">
          <a href="#" data-platform="book">Books</a>
        </li>
        <li class="list-group-item">
          <a href="#" data-platform="comicbook">Comicbooks</a>
        </li>
      </ul>
    </div>
    <div class="col">
      <p>Genre filters</p>
      <ul class="list-group list-group-horizontal filters-2" data-filter="genre">
        <li class="list-group-item active"><a href="#" data-reset="genre">ALL</a></li>
        <li class="list-group-item"><a href="#" data-genre="comic">Comic</a></li>
        <li class="list-group-item"><a href="#" data-genre="drama">Drama</a></li>
        <li class="list-group-item"><a href="#" data-genre="comedy">Comedy</a></li>
        <li class="list-group-item"><a href="#" data-genre="poetry">Poetry</a></li>
      </ul>
    </div>
  </div>
  <div class="row filtered-content">
    <div class="col-lg-3 py-2 px-2 object" data-platform="dvd" data-genre="drama">
      <img src="https://picsum.photos/id/237/200" alt="Random image" class="img-fluid" />
    </div>
    <div class="col-lg-3 py-2 px-2 object" data-platform="book" data-genre="comedy">
      <img src="https://picsum.photos/id/267/200" alt="Random image" class="img-fluid" />
    </div>
    <div class="col-lg-3 py-2 px-2 object" data-platform="comicbook" data-genre="comic">
      <img src="https://picsum.photos/id/287/200" alt="Random image" class="img-fluid" />
    </div>
    <div class="col-lg-3 py-2 px-2 object" data-platform="comicbook" data-genre="comic">
      <img src="https://picsum.photos/id/537/200" alt="Random image" class="img-fluid" />
    </div>
    <div class="col-lg-3 py-2 px-2 object" data-platform="book" data-genre="comedy">
      <img src="https://picsum.photos/id/937/200" alt="Random image" class="img-fluid" />
    </div>
    <div class="col-lg-3 py-2 px-2 object" data-platform="dvd" data-genre="poetry">
      <img src="https://picsum.photos/seed/picsum/200" alt="Random image" class="img-fluid" />
    </div>
    <div class="col-lg-3 py-2 px-2 object" data-platform="dvd" data-genre="drama">
      <img src="https://picsum.photos/id/117/200" alt="Random image" class="img-fluid" />
    </div>
  </div>
</div>

修复说明 #

1. 改用data()方法获取<a>标签上的自定义属性值，正确拿到筛选条件
2. 分开处理平台和类型两个维度的筛选逻辑，支持“ALL”选项（不限制该维度）
3. 修正目标元素为.object，确保读取到正确的元素属性
4. 添加e.preventDefault()阻止a标签默认跳转行为
5. 修复CSS中border属性的错误（原代码写的border: red!important，应该是border-color: red!important）

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