如何使用jQuery实现多属性Div筛选？求助解决自定义分类筛选问题

没问题，我来帮你搞定这个多属性Div筛选的需求！先给你补全合理的产品区域HTML结构，再一步步实现筛选逻辑：

首先我先补全产品区域的示例（假设每个产品可以关联多个筛选标签，用空格分隔在data-filters属性中，符合你的多属性筛选需求）：

<div class="sidebar">
  <div class="category" data-filter="A">Cat 1</div>
  <div class="category" data-filter="B">Cat 2</div>
  <div class="category" data-filter="A - 01">Cat 3</div>
  <div class="category" data-filter="B - 01">Cat 4</div>
</div>

<div class="products">
  <div class="product" data-filters="A">Product 1 (仅属于A)</div>
  <div class="product" data-filters="A A - 01">Product 2 (属于A+A-01)</div>
  <div class="product" data-filters="B">Product 3 (仅属于B)</div>
  <div class="product" data-filters="B B - 01">Product 4 (属于B+B-01)</div>
  <div class="product" data-filters="A B">Product 5 (同时属于A+B)</div>
</div>

接下来分样式和逻辑两部分实现：

1. 基础CSS（处理选中状态和显示隐藏） #

/* 侧边栏分类样式 */
.category {
  padding: 8px 12px;
  cursor: pointer;
  margin-bottom: 8px;
  border-radius: 4px;
  transition: background-color 0.2s;
}
.category.active {
  background-color: #007bff;
  color: white;
}

/* 产品区域样式 */
.product {
  padding: 16px;
  border: 1px solid #eee;
  margin: 8px;
  display: inline-block;
  border-radius: 4px;
}
.product.hidden {
  display: none;
}

2. 核心JavaScript筛选逻辑 #

// 获取页面元素
const categories = document.querySelectorAll('.category');
const products = document.querySelectorAll('.product');

// 存储选中的筛选条件（用Set避免重复）
const selectedFilters = new Set();

// 给每个分类绑定点击事件
categories.forEach(category => {
  category.addEventListener('click', () => {
    const currentFilter = category.dataset.filter;
    
    // 切换选中状态
    if (selectedFilters.has(currentFilter)) {
      selectedFilters.delete(currentFilter);
      category.classList.remove('active');
    } else {
      selectedFilters.add(currentFilter);
      category.classList.add('active');
    }
    
    // 执行筛选
    filterProducts();
  });
});

// 筛选产品的核心函数
function filterProducts() {
  // 如果没有选中任何筛选条件，直接显示所有产品
  if (selectedFilters.size === 0) {
    products.forEach(product => product.classList.remove('hidden'));
    return;
  }

  products.forEach(product => {
    // 把产品的筛选标签转为数组
    const productFilters = product.dataset.filters.split(' ');
    // 判断产品是否满足所有选中的筛选条件（AND逻辑）
    const isMatch = [...selectedFilters].every(filter => productFilters.includes(filter));
    
    // 根据匹配结果显示/隐藏产品
    product.classList.toggle('hidden', !isMatch);
  });
}

逻辑调整说明 #

• 默认AND逻辑：上面的代码是「产品必须包含所有选中的筛选条件」才会显示，比如同时选中A和A-01，只有Product 2会显示。
• 切换为OR逻辑：如果你需要「产品只要包含任意一个选中的筛选条件」就显示，只需要把every改成some：

  const isMatch = [...selectedFilters].some(filter => productFilters.includes(filter));
  

扩展建议 #

• 如果你的产品每个只属于一个分类，只需要把产品的data-filters改成单个值，逻辑依然适用。
• 可以额外加个「清空筛选」按钮，点击后清空selectedFilters并移除所有分类的active类，再调用filterProducts()即可。

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