当前位置：首页 > 行业动态 > 正文

html图片筛选代码

admin
行业动态
2025-05-02
4978

$(“input[name=’filter’]”).change(function(){var v=$(this).val();$(“img”).hide();$(“img[data-type='”+v+”‘]”).show()});

需求分析

图片筛选功能常用于图库、商品展示等场景,需实现以下核心功能：

html图片筛选代码第1张

根据分类/标签筛选图片
支持多选组合筛选
实时预览筛选结果
支持重置筛选条件

代码结构

模块	技术栈	功能描述
HTML	`<div>`容器	承载图片和筛选按钮
CSS	类名控制	通过`.active`类实现选中态样式
JavaScript	事件监听	处理筛选逻辑和DOM更新

关键代码解析

HTML结构

<div class="filter-btn" data-type="nature">自然</div>
<div class="filter-btn" data-type="city">城市</div>
<div class="filter-btn" data-type="food">美食</div>
<div class="image-container">
  <img src="img1.jpg" data-tags="nature,light" alt="">
  <img src="img2.jpg" data-tags="city,night" alt="">
  <!-更多图片 -->
</div>

CSS样式

.filter-btn.active {
  background-color: #007bff;
  color: white;
}
.image-container img {
  display: none; / 默认隐藏 /
}
.image-container img.visible {
  display: block; / 符合条件显示 /
}

JavaScript逻辑

// 获取所有筛选按钮
const filters = document.querySelectorAll('.filter-btn');
// 获取所有图片
const images = document.querySelectorAll('.image-container img');
// 初始化按钮事件
filters.forEach(btn => {
  btn.addEventListener('click', function() {
    // 切换激活状态
    this.classList.toggle('active');
    // 执行筛选
    filterImages();
  });
});
// 筛选函数
function filterImages() {
  // 收集已选中的过滤条件
  const activeFilters = Array.from(filters)
    .filter(btn => btn.classList.contains('active'))
    .map(btn => btn.dataset.type);
  // 遍历所有图片
  images.forEach(img => {
    // 获取图片标签列表
    const tags = img.dataset.tags.split(',');
    // 判断是否满足所有选中条件
    const isMatch = activeFilters.every(filter => tags.includes(filter));
    // 更新显示状态
    if (isMatch) {
      img.classList.add('visible');
    } else {
      img.classList.remove('visible');
    }
  });
}

完整示例演示

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">图片筛选示例</title>
  <style>
    body { font-family: Arial, sans-serif; }
    .filter-btn {
      padding: 8px 16px;
      margin: 5px;
      border: 1px solid #ccc;
      cursor: pointer;
    }
    .image-container {
      margin-top: 20px;
      display: flex;
      flex-wrap: wrap;
    }
    .image-container img {
      width: 150px;
      height: 100px;
      margin: 5px;
      object-fit: cover;
    }
  </style>
</head>
<body>
  <div class="filter-btn" data-type="nature">自然</div>
  <div class="filter-btn" data-type="city">城市</div>
  <div class="filter-btn" data-type="food">美食</div>
  <div class="image-container">
    <img src="https://via.placeholder.com/300x200?text=Nature" data-tags="nature,light" alt="">
    <img src="https://via.placeholder.com/300x200?text=City" data-tags="city,night" alt="">
    <img src="https://via.placeholder.com/300x200?text=Food" data-tags="food,restaurant" alt="">
    <img src="https://via.placeholder.com/300x200?text=Mountain" data-tags="nature,mountain" alt="">
  </div>
  <script>
    // JavaScript代码（同上）
  </script>
</body>
</html>