基于两个事件通过类名使用jQuery过滤DIV元素

嘿，我来帮你搞定这个筛选功能！你的HTML结构已经搭得很到位了，接下来咱们用JavaScript实现搜索框和下拉选择器的联动筛选逻辑，让两个控件配合起来精准过滤目标内容。

先整理下你的HTML（补了几个测试项方便看效果） #

<input type="search" id="filter-criteria" placeholder="输入关键词搜索...">
<select id="filter-select">
  <option value="all">all</option>
  <option value="red">red</option>
  <option value="blue">blue</option>
  <option value="purple">purple</option>
</select>

<div class="red one giraffe item">Red One Giraffe</div>
<div class="blue two monkey item">Blue Two Monkey</div>
<div class="purple three elephant item">Purple Three Elephant</div>
<div class="red four zebra item">Red Four Zebra</div>

核心JavaScript筛选逻辑 #

// 先拿到需要操作的DOM元素
const searchInput = document.getElementById('filter-criteria');
const categorySelect = document.getElementById('filter-select');
const items = document.querySelectorAll('.item');

// 定义筛选函数：同时匹配搜索关键词和分类
function filterItems() {
  // 把搜索词转成小写，实现不区分大小写的匹配
  const searchTerm = searchInput.value.toLowerCase();
  // 获取当前选中的分类值
  const selectedCategory = categorySelect.value;

  // 遍历所有待筛选的item
  items.forEach(item => {
    // 分类匹配逻辑：选"all"就匹配所有，否则检查item是否有对应分类的class
    const isCategoryMatch = selectedCategory === 'all' || item.classList.contains(selectedCategory);
    // 关键词匹配逻辑：检查item的文本是否包含搜索词（同样转小写）
    const isSearchMatch = item.textContent.toLowerCase().includes(searchTerm);

    // 两个条件都满足就显示，否则隐藏
    item.style.display = isCategoryMatch && isSearchMatch ? 'block' : 'none';
  });
}

// 给搜索框和下拉框绑定事件，实时触发筛选
searchInput.addEventListener('input', filterItems);
categorySelect.addEventListener('change', filterItems);

// 页面加载时先执行一次，确保初始状态正确
filterItems();

关键细节说明 #

• 不区分大小写匹配：不管用户输入大写还是小写，都能匹配到对应的内容，比如输入"RED"也能找到所有red类的item，体验更友好。
• 双条件联动：只有同时满足「分类选中的条件」和「搜索关键词匹配」的item才会显示，比如选了red分类再搜"zebra"，只会显示"Red Four Zebra"。
• 实时响应：输入框打字时、下拉框切换选项时都会立刻触发筛选，不用点额外的按钮，交互更流畅。

可选优化建议 #

• 加个过渡动画，让item显示/隐藏更平滑：

.item {
  margin: 8px 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.item[style="display: none;"] {
  opacity: 0;
  transform: translateY(10px);
}

• 如果item数量很多，建议加个防抖函数减少筛选次数，提升性能：

// 防抖函数：延迟执行，避免输入时频繁触发筛选
function debounce(func, delay = 250) {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// 用防抖后的函数替换原监听事件
const debouncedFilter = debounce(filterItems);
searchInput.addEventListener('input', debouncedFilter);

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