如何用Data Filter实现两类汽车清洗定价列的切换显示？

完全可以用你之前图片画廊的Data Filter思路来实现定价列的切换，核心逻辑都是通过点击过滤按钮，匹配目标元素的类名来控制显示/隐藏。以下是适配你需求的完整实现示例：

1. HTML结构（基于Bootstrap） #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<!-- 切换按钮组 -->
<div class="btn-group mb-4" role="group">
  <button type="button" class="btn btn-primary active" data-filter=".regular-car">常规汽车</button>
  <button type="button" class="btn btn-primary" data-filter=".large-car">大型汽车</button>
</div>

<!-- 定价列容器 -->
<div class="row">
  <!-- 常规汽车定价列 -->
  <article class="col-12 col-md-6 col-lg-4 pricing-column regular-car">
    <div class="card shadow-sm">
      <div class="card-header text-center">基础清洗</div>
      <div class="card-body">
        <h3 class="card-title text-center">$25</h3>
        <ul class="list-unstyled mt-3 mb-4">
          <li>✅ 外部高压冲洗</li>
          <li>✅ 轮胎轮毂清洁</li>
          <li>✅ 内饰表面吸尘</li>
        </ul>
        <a href="#" class="btn btn-success w-100">立即预约</a>
      </div>
    </div>
  </article>

  <article class="col-12 col-md-6 col-lg-4 pricing-column regular-car">
    <div class="card shadow-sm">
      <div class="card-header text-center">深度清洁</div>
      <div class="card-body">
        <h3 class="card-title text-center">$45</h3>
        <ul class="list-unstyled mt-3 mb-4">
          <li>✅ 包含基础清洗所有项目</li>
          <li>✅ 内饰皮革/织物擦拭</li>
          <li>✅ 车窗玻璃抛光</li>
          <li>✅ 车身缝隙清理</li>
        </ul>
        <a href="#" class="btn btn-success w-100">立即预约</a>
      </div>
    </div>
  </article>

  <!-- 大型汽车定价列 -->
  <article class="col-12 col-md-6 col-lg-4 pricing-column large-car">
    <div class="card shadow-sm">
      <div class="card-header text-center">基础清洗</div>
      <div class="card-body">
        <h3 class="card-title text-center">$35</h3>
        <ul class="list-unstyled mt-3 mb-4">
          <li>✅ 大型车身高压冲洗</li>
          <li>✅ 轮胎轮毂深度清洁</li>
          <li>✅ 宽大内饰全面吸尘</li>
        </ul>
        <a href="#" class="btn btn-success w-100">立即预约</a>
      </div>
    </div>
  </article>

  <article class="col-12 col-md-6 col-lg-4 pricing-column large-car">
    <div class="card shadow-sm">
      <div class="card-header text-center">深度清洁</div>
      <div class="card-body">
        <h3 class="card-title text-center">$60</h3>
        <ul class="list-unstyled mt-3 mb-4">
          <li>✅ 包含基础清洗所有项目</li>
          <li>✅ 全车内饰精细擦拭</li>
          <li>✅ 车窗玻璃抛光镀膜</li>
          <li>✅ 车身缝隙深度清理</li>
          <li>✅ 车身漆面打蜡养护</li>
        </ul>
        <a href="#" class="btn btn-success w-100">立即预约</a>
      </div>
    </div>
  </article>
</div>

2. CSS样式 #

/* 初始状态：隐藏大型汽车定价列 */
.pricing-column.large-car {
  display: none;
}

/* 按钮激活状态高亮 */
.btn-group .btn.active {
  background-color: #0069d9;
  border-color: #0062cc;
}

/* 定价卡片间距优化 */
.pricing-column {
  margin-bottom: 2rem;
}

3. JavaScript逻辑 #

// 获取所有过滤按钮和定价列元素
const filterBtns = document.querySelectorAll('.btn-group .btn');
const pricingColumns = document.querySelectorAll('.pricing-column');

// 为每个按钮绑定点击事件
filterBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    // 移除所有按钮的激活状态
    filterBtns.forEach(b => b.classList.remove('active'));
    // 标记当前按钮为激活状态
    btn.classList.add('active');
    
    // 获取当前按钮的过滤目标类名
    const targetClass = btn.getAttribute('data-filter').slice(1); // 去掉开头的.
    
    // 遍历所有定价列，控制显示/隐藏
    pricingColumns.forEach(col => {
      if (col.classList.contains(targetClass)) {
        col.style.display = 'block';
      } else {
        col.style.display = 'none';
      }
    });
  });
});

核心原理说明 #

和你之前的图片画廊逻辑完全一致：

• 按钮通过data-filter属性指定要显示的目标元素类名
• JavaScript监听按钮点击，切换按钮激活状态
• 根据data-filter的值，显示匹配类名的定价列，隐藏其他列

如果你之前使用的是Isotope这类专门的过滤库，也可以直接复用该库，只需要给定价列添加对应的类名，按钮的data-filter属性保持一致即可，无需手写JS逻辑。

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