求助：如何实现点击后隐藏价格超过150的商品元素

我来帮你修正代码里的问题，实现点击后仅显示价格低于150的商品功能。先梳理下你现有代码里的几个关键错误：

• ItemCollection.item.Price 写法错误：ItemCollection是数组，没有.item属性，你需要遍历数组里的每个商品对象
• document.getElementsByClassName("Shoe") 返回的是HTMLCollection（类数组集合），不能直接修改style.display，得逐个遍历元素处理
• 没有给触发功能的元素绑定点击事件，比如按钮
• 字符串拼接里存在标签未闭合、引号转义错误的问题

下面是修正后的完整代码，我会在注释里说明每一处改进：

// 商品数据集合
var ItemCollection = [ 
  { Name: 'IVY PA', Price: 160, Picture: 'some pic' }, 
  { Name: 'IVY P', Price: 100, Picture: 'some pic' }, 
];

var content = "";

// 修正字符串拼接语法，用模板字符串让代码更易读，避免标签/引号错误
function generateItem(item, index, arrays) {
  content += `
    <li class="Shoe" data-price="${item.Price}">
      <a href="#${item.Name}">
        <div>
          <img class="ItemPicture" src="${item.Picture}">
        </div>
        <div class="ItemInfo">
          <p>${item.Name}</p>
          <p>${item.Price}$</p>
        </div>
      </a>
    </li>
  `;
}

// 生成商品HTML并插入到容器
ItemCollection.forEach(generateItem);
$('#Collection').append(content);

// 实现筛选逻辑：隐藏价格超过150的商品
function under150() {
  // 获取所有商品元素
  const shoes = document.getElementsByClassName("Shoe");
  
  // 遍历每个商品元素，逐个判断价格
  for (let i = 0; i < shoes.length; i++) {
    const shoe = shoes[i];
    // 从元素的data-price属性读取价格（比从数组匹配更直接）
    const price = parseInt(shoe.dataset.price);
    
    // 根据价格控制显示状态
    if (price > 150) {
      shoe.style.display = "none";
    } else {
      shoe.style.display = "block"; // 确保符合条件的商品正常显示
    }
  }
}

// 给筛选按钮绑定点击事件（假设你有一个id为filterBtn的按钮）
document.getElementById('filterBtn').addEventListener('click', under150);

关键改进点说明： #

1. 使用模板字符串（`）替代传统字符串拼接，彻底避免引号转义和标签闭合错误，代码可读性也更高
2. 给每个商品li元素添加data-price自定义属性，直接存储商品价格，后续筛选时无需再从数组匹配，逻辑更简洁
3. 正确遍历HTMLCollection集合，逐个处理每个商品的显示状态
4. 添加了点击事件绑定，确保用户点击按钮时触发筛选功能
5. 修正了generateItem函数里的标签语法错误（比如<\这种错误写法）

最后你只需要在HTML里添加一个触发按钮和商品容器：

<button id="filterBtn">显示价格低于150的商品</button>
<ul id="Collection"></ul>

这样点击按钮后，价格超过150的商品就会被隐藏，符合条件的商品正常显示啦。

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