如何解决Django项目jQuery实现收藏心形图标颜色切换仅生效一次的问题

• 代码中直接使用了未定义的product_id变量，运行时本应抛出引用错误，若能生效大概率是硬编码了固定商品ID，导致操作的元素和实际点击的元素不匹配
• 核心bug：收藏/取消收藏的操作完成后，从未更新<a>标签上的data-text属性，状态值始终停留在页面初次渲染时的结果。比如首次添加成功后，data-text仍然是add，下次点击时还是会走添加的逻辑分支，把颜色设为红色，完全无法切换回浅灰色
• 全局拼接类名查找元素的方式，在多商品列表场景下容易匹配错目标元素，进一步导致状态错乱

模板代码 #

原有Django模板的渲染逻辑没有问题，不需要修改，初始状态的颜色、data-text标记都会根据服务端的收藏状态正确渲染。

修正后的Ajax逻辑 #

不需要额外拼接带商品ID的类名做选择器，直接基于当前点击的元素做操作，同时在请求成功后同步更新状态标记：

$(document).on('click', '.favourite-product', function (e) {
    e.preventDefault();
    // 缓存当前点击的链接元素，减少重复DOM查询
    const $favLink = $(this);
    // 从当前元素的data属性提取商品ID
    const currentProductId = $favLink.data('id');
    // 读取当前操作状态
    const currentAction = $.trim($favLink.attr('data-text'));
    $.ajax({
        url: $favLink.attr('href'),
        type: 'GET',
        data: {
            'product': currentProductId
        },
        success: function () {
            // 找到链接内部的心形图标
            const $heartIcon = $favLink.find('i.fa-heart');
            if (currentAction === 'add') {
                // 收藏成功：图标切为红色，同步更新状态为"remove"
                $heartIcon.css('color', 'red');
                $favLink.attr('data-text', 'remove');
            } else {
                // 取消收藏成功：图标切为浅灰，同步更新状态为"add"
                $heartIcon.css('color', '#eee');
                $favLink.attr('data-text', 'add');
            }
        },
        error: function () {
            alert("error");
        }
    });
});

• 可以把颜色样式抽成CSS类，不要直接写内联样式，后续调整颜色时不需要修改JS代码
• 可以在Ajax请求过程中给按钮加禁用状态，避免用户快速多次点击导致请求重复、状态错乱

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