如何通过JavaScript实现服装目录的按性别过滤功能

核心思路 #

把服装渲染逻辑封装成可复用函数，通过按钮点击传递过滤条件，每次渲染前清空目标容器，再根据条件过滤数组后生成新的DOM内容。

具体实现步骤 #

1. 封装通用渲染函数

将原有渲染代码抽成支持过滤参数的函数，不传参数时默认显示全部服装：

// 假设你的服装数据数组定义如下
const clothes = [
  { gen: 'mas', name: '男士牛仔外套', price: 299 },
  { gen: 'fem', name: '女士针织开衫', price: 159 },
  { gen: 'inf', name: '儿童背带裤', price: 99 },
  // 更多服装数据...
];

// 获取存放目录的目标容器
const catalogContainer = document.getElementById('你的容器ID');

// 封装渲染函数
function renderFilteredClothes(targetGen = null) {
  // 清空容器，避免新旧内容重复
  catalogContainer.innerHTML = '';
  
  // 根据传入的条件过滤数组
  const filteredList = targetGen 
    ? clothes.filter(item => item.gen === targetGen) 
    : clothes;
  
  // 生成要插入的HTML字符串
  const clothesHTML = filteredList.map(item => `
    <div class="clothes-card">
      <h4>${item.name}</h4>
      <p>价格: ${item.price}元</p>
      <!-- 其他服装属性展示 -->
    </div>
  `).join('');
  
  // 插入到容器中
  catalogContainer.insertAdjacentHTML('beforeend', clothesHTML);
}

// 页面初始化时渲染全部服装
renderFilteredClothes();

2. 给过滤按钮绑定点击事件

给三个按钮添加点击监听，触发对应条件的渲染：

// 获取三个按钮元素
const hombreBtn = document.getElementById('hombre-btn');
const mujerBtn = document.getElementById('mujer-btn');
const infantesBtn = document.getElementById('infantes-btn');

// 绑定点击事件
hombreBtn.addEventListener('click', () => renderFilteredClothes('mas'));
mujerBtn.addEventListener('click', () => renderFilteredClothes('fem'));
infantesBtn.addEventListener('click', () => renderFilteredClothes('inf'));

3. 对应HTML结构参考

确保按钮和容器有正确的ID：

<!-- 过滤按钮组 -->
<button id="hombre-btn">Hombre</button>
<button id="mujer-btn">Mujer</button>
<button id="infantes-btn">Infantes</button>

<!-- 服装目录容器 -->
<div id="catalog-container"></div>

关键点说明 #

• 清空容器：每次渲染前通过innerHTML = ''避免内容重复叠加。
• 过滤逻辑：使用Array.filter()快速筛选符合gen属性的服装数据。
• 事件绑定：通过箭头函数直接传递过滤参数，逻辑简洁直观。

内容的提问来源于stack exchange，提问作者ROBERTO RIVAS MONZON