如何通过点击按钮/图片实现jQuery总价扣减功能？

看起来你在实现「点击图片添加商品到画布并累加总价，删除画布商品时扣减对应总价」的功能时卡壳了，尤其是删除环节的逻辑有问题。先帮你拆解下现有代码里的坑，再给出可行的修复方案：

现有代码的核心问题 #

1. 语法逻辑混乱：你在$('.items_img').click事件里嵌套了else if ($(document).click(function(deleteObject()))，这写法完全错误——既不符合语法规则，也没搞清楚删除操作的触发时机。
2. 数组与变量处理错误：
   • 判断数组是否为空应该用totalname.length === 0，而不是totalname == ''
   • 把数组直接赋值给输入框$('#name').val(totalname)会显示数组的原始字符串形式（比如[item1,item2]），应该用join转成友好的格式
   • totalprice没有初始化，第一次累加会变成NaN
3. 删除时未关联商品数据：你只移除了画布上的对象，但没同步从总价和名称列表里删除对应的数据，而且也没把商品的价格/名称绑定到画布对象上，删除时根本拿不到要扣减的数值。

修复后的完整实现 #

第一步：初始化全局变量 #

先在作用域顶部初始化总价和名称数组，避免未定义的问题：

let totalprice = 0;
let totalname = [];

第二步：修正添加商品的逻辑 #

点击图片时，把商品的名称和价格绑定到画布对象上，同时正确更新输入框：

$(document).ready(function() {
    $('.items_img').click(function() {
        const $this = $(this);
        const path = $this.attr('data-title');
        const name = $this.attr('data-name');
        const price = parseInt($this.attr('data-target')) || 0; // 防止无效价格

        // 调用addImage时，把商品名称和价格传进去，绑定到画布对象上
        addImage(path, 500, 500, 0.5, -90, 3, name, price);

        // 更新名称数组和总价
        totalname.push(name);
        totalprice += price;

        // 同步更新输入框显示
        $('#name').val(totalname.length > 0 ? totalname.join(', ') : '');
        $('#cost').val(totalprice > 0 ? totalprice : '');
    });

第三步：修改addImage函数，绑定商品数据 #

假设你用的是fabric.js（从canvas.getActiveObject()推断），修改addImage函数，把商品的名称和价格绑定到生成的图片对象上：

function addImage(path, width, height, scale, x, y, itemName, itemPrice) {
    // 这里是你原有的创建图片对象的逻辑，示例如下：
    fabric.Image.fromURL(path, function(img) {
        img.set({
            width: width,
            height: height,
            scaleX: scale,
            left: x,
            top: y,
            // 绑定自定义属性，方便删除时获取数据
            itemName: itemName,
            itemPrice: itemPrice
        });
        canvas.add(img);
    });
}

第四步：实现删除时的总价扣减逻辑 #

修改deleteObject函数，删除画布对象的同时，同步扣减总价并更新名称数组：

function deleteObject() {
    const activeObj = canvas.getActiveObject();
    if (!activeObj) return; // 没有选中对象就不执行操作

    // 从画布对象上获取绑定的商品价格和名称
    const delPrice = activeObj.itemPrice;
    const delName = activeObj.itemName;

    // 扣减总价，确保不会出现负数
    totalprice -= delPrice;
    totalprice = Math.max(totalprice, 0);

    // 从名称数组中移除对应商品（如果有重复商品，建议改用计数对象管理）
    const nameIndex = totalname.indexOf(delName);
    if (nameIndex !== -1) {
        totalname.splice(nameIndex, 1);
    }

    // 同步更新输入框
    $('#name').val(totalname.length > 0 ? totalname.join(', ') : '');
    $('#cost').val(totalprice > 0 ? totalprice : '');

    // 移除画布上的对象
    canvas.remove(activeObj);
}

第五步：绑定删除操作的触发事件 #

比如给一个删除按钮绑定点击事件（不要绑定document的click，这会导致点击任何地方都触发删除）：

// 假设你有一个id为delete-btn的删除按钮
$('#delete-btn').click(function() {
    deleteObject();
});
}); // 闭合$(document).ready的括号

额外注意事项 #

• 如果允许重复添加同一个商品，totalname.indexOf(delName)只会删除第一个匹配项，这时候建议用计数对象来管理商品数量，比如const itemCount = { '商品A': 2, '商品B': 1 }，删除时减少计数，再重新计算总价
• 确保data-target属性的值是有效的数字，避免parseInt返回NaN

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