如何高效实现菜单计算器的商品总价求和功能？

不用给每个按钮加ID和写一堆if else，推荐用数据绑定+事件委托的方案，代码更简洁、可维护性更高，步骤如下：

核心思路 #

1. 将商品名称和价格整合为对象数组，让数据结构更清晰
2. 动态生成元素时，通过dataset属性给每个商品容器绑定对应价格
3. 给父容器icons-container绑定一个点击事件（事件委托），统一处理所有商品的点击操作，避免给每个元素单独绑定事件
4. 维护一个总价变量，每次点击商品时更新总价并同步到页面

修改后的完整代码 #

HTML部分 #

<body>
    <div class="icons-container" id="container">
    </div>
    <div class="displayer">
        <p>price</p>
        <p id="total">0</p> <!-- 给总价元素加ID，方便更新 -->
    </div>
</body>
</html>

JavaScript部分 #

// 重构数据为对象数组，更易维护
const productos = [
    { nombre: 'Kg', precio: 440 },
    { nombre: 'Taco', precio: 30 },
    { nombre: 'Dorado', precio: 24 },
    { nombre: '1LtCSM', precio: 50 },
    { nombre: '1/2CSM', precio: 25 },
    { nombre: 'Boing', precio: 20 },
    { nombre: 'Cafe', precio: 20 },
    { nombre: 'Refresco', precio: 25 }
];

let total = 0; // 维护总价变量
const totalElement = document.getElementById('total');
const container = document.getElementById('container');

// 动态生成商品元素
productos.forEach(producto => {
    const div = document.createElement('div');
    const h3 = document.createElement('h3');
    
    div.classList.add('cuadro');
    // 用dataset存储商品价格
    div.dataset.precio = producto.precio;
    h3.textContent = producto.nombre;
    h3.classList.add('icon-text');
    
    div.appendChild(h3);
    container.appendChild(div);
});

// 事件委托：给父容器绑定点击事件
container.addEventListener('click', (e) => {
    // 找到点击的商品容器（确保点击到的是cuadro元素或其子元素）
    const cuadro = e.target.closest('.cuadro');
    if (!cuadro) return; // 如果没点击到商品容器，直接返回
    
    const precio = Number(cuadro.dataset.precio);
    total += precio;
    // 更新页面上的总价
    totalElement.textContent = total;
});

关键细节说明 #

• 数据结构优化：把分散的两个数组整合成对象数组，后续新增商品只需在数组里加一个对象，不用修改多处代码
• dataset存储数据：div.dataset.precio会在DOM元素上生成data-precio属性，方便关联商品价格，不用靠ID区分
• 事件委托：只给父容器绑定一次事件，不管后续新增多少商品，都能自动触发点击逻辑，性能更优
• closest方法：确保点击商品内的任何元素（比如h3）都能找到对应的商品容器，避免事件绑定失效

内容的提问来源于stack exchange，提问作者Daniel Sanchez Islas