纯JavaScript实现多条件（下拉、价格区间）筛选卡片功能咨询

核心实现思路 #

多条件联动筛选的核心逻辑是：每次任意筛选条件发生变更时，统一收集当前所有筛选条件的取值，遍历所有房产卡片，仅展示同时满足全部有效筛选条件的卡片，避免单条件过滤互相覆盖的问题。

步骤1：优化HTML结构，给卡片添加数据属性 #

在原有.card元素上新增data-*自定义属性，存储该房产的关键筛选属性，避免后续JS重复读取DOM节点内容，提升性能和可维护性：

<!-- 示例：修改后的房产卡片结构，其他卡片同理配置对应属性 -->
<div class="card" data-type="1" data-category="1" data-price="135000">
  <!-- 原有卡片内容不变 -->
</div>

属性对应规则：

• data-type：对应房产类型下拉框的value值，1=住宅、2=公寓、3=乡间别墅、4=土地
• data-category：对应租售类型下拉框的value值，1=出售、2=出租
• data-price：存储纯数字格式的房产价格，去掉货币符号、千位分隔符

步骤2：替换原有JS逻辑，实现多条件联动筛选 #

完整JS代码如下：

// 1. 获取所有筛选控件和房产卡片
const selectType = document.getElementById('select__type');
const selectCategory = document.getElementById('select__category');
const priceMinInput = document.querySelector('.filters__price--prev input');
const priceMaxInput = document.querySelector('.filters__price--next input');
const allCards = document.querySelectorAll('.card');

// 2. 统一的筛选执行函数
function filterCards() {
  // 收集当前所有筛选条件的取值
  const selectedType = selectType.value;
  const selectedCategory = selectCategory.value;
  const priceMin = priceMinInput.value.replace(/,/g, '') ? Number(priceMinInput.value.replace(/,/g, '')) : 0;
  const priceMax = priceMaxInput.value.replace(/,/g, '') ? Number(priceMaxInput.value.replace(/,/g, '')) : Infinity;

  // 遍历所有卡片做匹配判断
  allCards.forEach(card => {
    const cardType = card.dataset.type;
    const cardCategory = card.dataset.category;
    const cardPrice = Number(card.dataset.price);
    // 全条件匹配判断
    const isMatch = 
      (selectedType === '.' || cardType === selectedType) &&
      (selectedCategory === '.' || cardCategory === selectedCategory) &&
      cardPrice >= priceMin &&
      cardPrice <= priceMax;
    // 控制显示/隐藏
    if(isMatch) {
      card.style.opacity = '1';
      card.style.visibility = 'visible';
      card.style.order = '-1';
    } else {
      card.style.opacity = '0';
      // 如需完全隐藏不占位置可以改为 card.style.display = 'none'
      card.style.visibility = 'visible';
    }
  })
}

// 3. 给所有筛选控件绑定触发事件
selectType.addEventListener('change', filterCards);
selectCategory.addEventListener('change', filterCards);
priceMinInput.addEventListener('input', filterCards);
priceMaxInput.addEventListener('input', filterCards);

优化说明 #

• 价格输入框支持用户输入带千位分隔符的价格，代码会自动处理为纯数字做比较
• 如果筛选条件未选择/未输入，会自动忽略该条件的限制，默认全匹配
• 所有筛选条件变更时都会实时触发重新匹配，保证多条件同步生效

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