js 商品列表效果

在JavaScript中实现商品列表效果，通常涉及到DOM操作、事件处理以及可能的数据获取与渲染。以下是一个基础的商品列表效果的实现，包括HTML结构、CSS样式和JavaScript代码。

HTML结构

<div id="product-list">
  <!-- 商品列表将动态生成在这里 -->
</div>

<script src="products.js"></script> <!-- 假设商品数据存储在这个文件中 -->
<script src="script.js"></script> <!-- JavaScript代码将放在这里 -->

CSS样式

#product-list {
  display: flex;
  flex-wrap: wrap;
}

.product-item {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 5px;
  width: 200px;
}

.product-image {
  max-width: 100%;
  height: auto;
}

.product-title {
  font-size: 18px;
  margin-top: 10px;
}

.product-price {
  color: red;
  font-weight: bold;
}

JavaScript代码（script.js）

// 假设我们从products.js文件中获取到了商品数据
const products = [
  { id: 1, name: '商品1', price: 99.99, image: 'path/to/image1.jpg' },
  { id: 2, name: '商品2', price: 149.99, image: 'path/to/image2.jpg' },
  // ...更多商品
];

const productList = document.getElementById('product-list');

// 渲染商品列表
function renderProductList(products) {
  productList.innerHTML = ''; // 清空现有列表

  products.forEach(product => {
    const productItem = document.createElement('div');
    productItem.classList.add('product-item');

    const productImage = document.createElement('img');
    productImage.src = product.image;
    productImage.alt = product.name;
    productImage.classList.add('product-image');

    const productTitle = document.createElement('div');
    productTitle.classList.add('product-title');
    productTitle.textContent = product.name;

    const productPrice = document.createElement('div');
    productPrice.classList.add('product-price');
    productPrice.textContent = `￥${product.price.toFixed(2)}`;

    productItem.appendChild(productImage);
    productItem.appendChild(productTitle);
    productItem.appendChild(productPrice);

    productList.appendChild(productItem);
  });
}

// 初始渲染
renderProductList(products);

// 假设我们有一个筛选功能，只显示价格低于100的商品
function filterProducts() {
  const filteredProducts = products.filter(product => product.price < 100);
  renderProductList(filteredProducts);
}

// 可以在某个事件触发时调用filterProducts函数，例如按钮点击