<div class="product-item" data-category="novel"> <a href="555.html?id=1"> <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.E1l9GHWnkbNLjcnJpqTpPAHaKC?rs=1&pid=ImgDetMain" alt="产品1"> <h3>产品1:红楼梦</h3> <p>价格:$50</p> </a> <button onclick="addToCart('产品1:红楼梦', 50, 'https://tse4-mm.cn.bing.net/th/id/OIP-C.E1l9GHWnkbNLjcnJpqTpPAHaKC?rs=1&pid=ImgDetMain')">添加到购物车</button> </div> <div class="product-item" data-category="novel"> <a href="555.html?id=2"> <img src="https://ts1.tc.mm.bing.net/th/id/R-C.115539104325e27be2f0ee05ca4c080b?rik=xSg%2bwFfcC1%2b2QQ&riu=https%3a%2f%2f2.zoppoz.workers.dev%3a443%2fhttp%2fimages.bookuu.com%2fbook%2fC%2f01638%2f2634742-fm.jpg&ehk=H9B6G0WCUFgsQjHJE1iAtNWwpFnhmdAg30ByUapdJfY%3d&risl=&pid=ImgRaw&r=0" alt="产品2"> <h3>产品2:西游记</h3> <p>价格:$75</p> </a> <button onclick="addToCart('产品2:西游记', 75, 'https://ts1.tc.mm.bing.net/th/id/R-C.115539104325e27be2f0ee05ca4c080b?rik=xSg%2bwFfcC1%2b2QQ&riu=https%3a%2f%2f2.zoppoz.workers.dev%3a443%2fhttp%2fimages.bookuu.com%2fbook%2fC%2f01638%2f2634742-fm.jpg&ehk=H9B6G0WCUFgsQjHJE1iAtNWwpFnhmdAg30ByUapdJfY%3d&risl=&pid=ImgRaw&r=0')">添加到购物车</button> </div> <div class="product-item" data-category="novel"> <a href="555.html?id=3"> <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.3JrruqZy-PznYJxAHsoUdAHaKe?rs=1&pid=ImgDetMain" alt="产品3"> <h3>产品3:水浒传</h3> <p>价格:$100</p> </a> <button onclick="addToCart('产品3:水浒传', 100, 'https://tse3-mm.cn.bing.net/th/id/OIP-C.3JrruqZy-PznYJxAHsoUdAHaKe?rs=1&pid=ImgDetMain')">添加到购物车</button> </div> <div class="product-item" data-category="novel"> <a href="555.html?id=4"> <img src="https://ts1.tc.mm.bing.net/th/id/R-C.741a4e06ace8ed3a2a47d2a7fc53efa6?rik=OTex%2bIz3NhB3vw&riu=https%3a%2f%2f2.zoppoz.workers.dev%3a443%2fhttp%2fsdwypress.com%2fuploads%2fimage%2f2106%2f24%2f210624143125esxhc.jpg&ehk=bJB%2f6p6aW7wkHHbCiUTcnRf%2bNLwOktGxYScy28rgjwg%3d&risl=&pid=ImgRaw&r=0" alt="产品4"> <h3>产品4:三国演义</h3> <p>价格:$55</p> </a> <button onclick="addToCart('产品4:三国演义', 55, 'https://ts1.tc.mm.bing.net/th/id/R-C.741a4e06ace8ed3a2a47d2a7fc53efa6?rik=OTex%2bIz3NhB3vw&riu=https%3a%2f%2f2.zoppoz.workers.dev%3a443%2fhttp%2fsdwypress.com%2fuploads%2fimage%2f2106%2f24%2f210624143125esxhc.jpg&ehk=bJB%2f6p6aW7wkHHbCiUTcnRf%2bNLwOktGxYScy28rgjwg%3d&risl=&pid=ImgRaw&r=0')">添加到购物车</button> </div> <div class="product-item" data-category="novel"> <a href="555.html?id=5"> <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.4tBovpeIT27lEOj0FuFT5QHaKu?rs=1&pid=ImgDetMain" alt="产品5"> <h3>产品5:红岩</h3> <p>价格:$65</p> </a> <button onclick="addToCart('产品5:红岩', 65, 'https://tse1-mm.cn.bing.net/th/id/OIP-C.4tBovpeIT27lEOj0FuFT5QHaKu?rs=1&pid=ImgDetMain')">添加到购物车</button> </div> <div class="product-item" data-category="history"> <a href="555.html?id=6"> <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.PgSOBNz_XC3Q2b_O9Nkh-wHaLS?rs=1&pid=ImgDetMain" alt="产品6"> <h3>产品6:开放中的变迁</h3> <p>价格:$50</p> </a> <button onclick="addToCart('产品6:开放中的变迁', 50, 'https://tse4-mm.cn.bing.net/th/id/OIP-C.PgSOBNz_XC3Q2b_O9Nkh-wHaLS?rs=1&pid=ImgDetMain')">添加到购物车</button> </div> <div class="product-item" data-category="history"> <a href="555.html?id=7"> <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.1O2NDFn3NcQ5UtfKVUX9qwHaLD?rs=1&pid=ImgDetMain" alt="产品7"> <h3>产品7:中国近代史</h3> <p>价格:$55</p> </a> <button onclick="addToCart('产品7:中国近代史', 55, 'https://tse2-mm.cn.bing.net/th/id/OIP-C.1O2NDFn3NcQ5UtfKVUX9qwHaLD?rs=1&pid=ImgDetMain')">添加到购物车</button> </div> <div class="product-item" data-category="history"> <a href="555.html?id=8"> <img src="https://img3.doubanio.com/lpic/s27258223.jpg" alt="产品8"> <h3>产品8:国史大纲</h3> <p>价格:$65</p> </a> <button onclick="addToCart('产品8:国史大纲', 65, 'https://img3.doubanio.com/lpic/s27258223.jpg')">添加到购物车</button> </div> <div class="product-item" data-category="science"> <a href="555.html?id=9"> <img src="https://so1.360tres.com/t0151ae7fb7ec6d8870.jpg" alt="产品9"> <h3>产品9:时间简史</h3> <p>价格:$65</p> </a> <button onclick="addToCart('产品9:时间简史', 65, 'https://so1.360tres.com/t0151ae7fb7ec6d8870.jpg')">添加到购物车</button> </div> <div class="product-item" data-category="science"> <a href="555.html?id=10"> <img src="https://img.alicdn.com/bao/uploaded/i1/3715517208/O1CN01yttyGV237JTlFwGhn_!!0-item_pic.jpg" alt="产品10"> <h3>产品10:从一到无穷大:科学中的事实和臆测</h3> <p>价格:$65</p> </a> <button onclick="addToCart('产品10:从一到无穷大:科学中的事实和臆测', 65, 'https://img.alicdn.com/bao/uploaded/i1/3715517208/O1CN01yttyGV237JTlFwGhn_!!0-item_pic.jpg')">添加到购物车</button> </div>把这些代码改成这种格式const products = [ { id: '1', name: '产品1:红楼梦', price: 50, image: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.E1l9GHWnkbNLjcnJpqTpPAHaKC?rs=1&pid=ImgDetMain', description: '这是红楼梦的详细描述...' }, { id: '2', name: '产品2:西游记', price: 75, image: 'https://ts1.tc.mm.bing.net/th/id/R-C.115539104325e27be2f0ee05ca4c080b?rik=xSg%2bwFfcC1%2b2QQ&riu=https%3a%2f%2f2.zoppoz.workers.dev%3a443%2fhttp%2fimages.bookuu.com%2fbook%2fC%2f01638%2f2634742-fm.jpg&ehk=H9B6G0WCUFgsQjHJE1iAtNWwpFnhmdAg30ByUapdJfY%3d&risl=&pid=ImgRaw&r=0', description: '这是西游记的详细描述...' }, // 其他商品... ];
时间: 2025-05-30 22:08:34 浏览: 290
以下是将您提供的代码转换为 `const products` 数组格式的实现。这种格式更便于动态生成商品卡片,减少手动编写 HTML 的工作量。
---
### 修改后的代码
```javascript
const products = [
{ id: '1', name: '产品1:红楼梦', price: 50, image: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.E1l9GHWnkbNLjcnJpqTpPAHaKC?rs=1&pid=ImgDetMain', description: '这是红楼梦的详细描述...' },
{ id: '2', name: '产品2:西游记', price: 75, image: 'https://ts1.tc.mm.bing.net/th/id/R-C.115539104325e27be2f0ee05ca4c080b?rik=xSg%2bwFfcC1%2b2QQ&riu=https%3a%2f%2f2.zoppoz.workers.dev%3a443%2fhttp%2fimages.bookuu.com%2fbook%2fC%2f01638%2f2634742-fm.jpg&ehk=H9B6G0WCUFgsQjHJE1iAtNWwpFnhmdAg30ByUapdJfY%3d&risl=&pid=ImgRaw&r=0', description: '这是西游记的详细描述...' },
{ id: '3', name: '产品3:水浒传', price: 100, image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.3JrruqZy-PznYJxAHsoUdAHaKe?rs=1&pid=ImgDetMain', description: '这是水浒传的详细描述...' },
{ id: '4', name: '产品4:三国演义', price: 55, image: 'https://ts1.tc.mm.bing.net/th/id/R-C.741a4e06ace8ed3a2a47d2a7fc53efa6?rik=OTex%2bIz3NhB3vw&riu=https%3a%2f%2f2.zoppoz.workers.dev%3a443%2fhttp%2fsdwypress.com%2fuploads%2fimage%2f2106%2f24%2f210624143125esxhc.jpg&ehk=bJB%2f6p6aW7wkHHbCiUTcnRf%2bNLwOktGxYScy28rgjwg%3d&risl=&pid=ImgRaw&r=0', description: '这是三国演义的详细描述...' },
{ id: '5', name: '产品5:红岩', price: 65, image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.4tBovpeIT27lEOj0FuFT5QHaKu?rs=1&pid=ImgDetMain', description: '这是红岩的详细描述...' },
{ id: '6', name: '产品6:开放中的变迁', price: 50, image: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.PgSOBNz_XC3Q2b_O9Nkh-wHaLS?rs=1&pid=ImgDetMain', description: '这是开放中的变迁的详细描述...' },
{ id: '7', name: '产品7:中国近代史', price: 55, image: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.1O2NDFn3NcQ5UtfKVUX9qwHaLD?rs=1&pid=ImgDetMain', description: '这是中国近代史的详细描述...' },
{ id: '8', name: '产品8:国史大纲', price: 65, image: 'https://img3.doubanio.com/lpic/s27258223.jpg', description: '这是国史大纲的详细描述...' },
{ id: '9', name: '产品9:时间简史', price: 65, image: 'https://so1.360tres.com/t0151ae7fb7ec6d8870.jpg', description: '这是时间简史的详细描述...' },
{ id: '10', name: '产品10:从一到无穷大:科学中的事实和臆测', price: 65, image: 'https://img.alicdn.com/bao/uploaded/i1/3715517208/O1CN01yttyGV237JTlFwGhn_!!0-item_pic.jpg', description: '这是从一到无穷大的详细描述...' }
];
// 动态生成商品卡片
function generateProductCards() {
const productGrid = document.querySelector('.product-grid');
productGrid.innerHTML = ''; // 清空原有内容
products.forEach(product => {
const productItem = document.createElement('div');
productItem.className = 'product-item';
productItem.setAttribute('data-category', 'novel'); // 设置类别
productItem.innerHTML = `
<a href="555.html?id=${product.id}">
<img src="${product.image}" alt="${product.name}">
<h3>${product.name}</h3>
<p>价格:$${product.price}</p>
</a>
<button onclick="addToCart('${product.name}', ${product.price}, '${product.image}')">添加到购物车</button>
`;
productGrid.appendChild(productItem);
});
}
// 调用函数生成商品卡片
generateProductCards();
```
---
### 代码解释
1. **`products` 数组**:
- 将所有商品信息存储在 `products` 数组中,每个商品对象包含 `id`、`name`、`price`、`image` 和 `description` 属性。
- 这种结构便于管理和扩展商品数据。
2. **动态生成商品卡片**:
- 使用 `generateProductCards` 函数遍历 `products` 数组,动态创建每个商品的 HTML 结构。
- 每个商品项包含一个 `<a>` 标签用于跳转到详情页,并通过 URL 参数传递商品 ID。
- 商品卡片还包含一个 `添加到购物车` 按钮,点击时调用 `addToCart` 函数。
3. **HTML 插入**:
- 使用 `document.createElement` 创建商品容器,并通过 `innerHTML` 填充内容。
- 最后将生成的商品卡片插入到 `.product-grid` 容器中。
4. **保持原有功能不变**:
- 每个商品项仍然保留了 `添加到购物车` 按钮的功能。
---
###
阅读全文