本文讲解如何在 javascript 动态生成 html 卡片时，精准为库存为“no”的商品卡片添加灰度样式，避免全局误匹配，并修复原始代码中的拼写错误与逻辑冗余。
本文讲解如何在 javascript 动态生成 html 卡片时，精准为库存为“no”的商品卡片添加灰度样式，避免全局误匹配，并修复原始代码中的拼写错误与逻辑冗余。
在前端开发中，常需根据数据状态（如 stock: 'no'）动态控制 DOM 元素的样式。原始代码存在两个关键问题：一是模板字符串中变量名拼写错误（${stoak} → ${stock}），二是后续遍历逻辑错误——用双重循环将所有卡片与每个商品的 stock 值反复比对，导致所有卡片都被错误添加 .gray 类。
正确的做法是在单次渲染循环中完成结构构建与状态判断，既提升性能，又确保样式精准绑定到对应卡片。以下是优化后的完整实现：
const goods = [
{
img: "/img/iphone.jpg",
name: 'iPhone',
model: 'Gky-42-s',
stock: 'yes'
},
{
name: 'Samsung',
model: 'JIj-21s',
stock: 'yes'
},
{
name: 'Honor',
model: 'Jiu-21-e-2',
stock: 'no'
}
];
const wrapper = document.querySelector('#wrapper');
class Card {
render() {
let htmlCard = '';
goods.forEach(({ name, model, stock, img }) => {
// ✅ 根据 stock 状态动态设置 class：stock === 'no' 时添加 'gray'
const cardClass = stock === 'no' ? 'card gray' : 'card';
// ✅ 修正拼写：${stock}（非 ${stoak}）
htmlCard += `
<div class="${cardClass}">
<img src="%24%7Bimg%20%7C%7C%20'/img/placeholder.png'%7D" alt="${name}"><span>${name}</span>
<span>${model}</span>
<span>${stock}</span>
</div>`;
});
wrapper.innerHTML = htmlCard;
}
}
// 应用渲染
new Card().render();
配套 CSS 示例（确保灰度效果生效）：
.card {
border: 1px solid #ddd;
padding: 12px;
margin: 8px;
border-radius: 4px;
transition: opacity 0.3s ease;
}
.card.gray {
opacity: 0.6;
background-color: #f5f5f5;
pointer-events: none; /* 可选：禁用交互 */
}
.card img {
width: 60px;
height: 60px;
object-fit: cover;
vertical-align: middle;
margin-right: 8px;
}
⚠️ 注意事项：
- 变量名一致性：JS 中严格区分大小写与拼写，stock 误写为 stoak 会导致 undefined 渲染，且后续条件判断失效；
- 避免重复遍历：原代码中 goods.forEach 嵌套在 for 循环内，时间复杂度 O(n²)，而单次映射即可完成全部逻辑；
-
空值容错：示例中为 img 添加了默认占位图路径，防止因部分商品缺失图片字段导致
标签异常；
- 语义化建议：若 stock 值实际为 'yes'/'no'（英文），请统一后端返回格式；若为中文 '是'/'否' 或布尔值 true/false，需同步调整判断条件（如 !stock 或 stock === '否'）。
通过一次循环完成结构生成与样式决策，代码更简洁、可维护性更强，也符合现代前端“声明式渲染”的最佳实践。
