ASP.NET Core中AJAX响应后为对应点赞图标分配正确CSS类

问题根源在于异步请求的闭包特性：循环中发起AJAX时，所有回调函数会共享同一个循环变量，当请求完成时循环已结束，变量最终指向最后一个图标元素，导致所有回调都修改最后一个图标。

修复思路 #

为每个循环迭代保留当前图标元素的独立引用，确保AJAX回调能精准操作对应元素。

代码实现（jQuery示例） #

// 遍历所有带data-idAudio属性的心形图标
$('.fa-heart[data-idAudio]').each(function() {
    // 保存当前图标元素的引用，避免闭包导致的变量污染
    const $currentHeart = $(this);
    const audioId = $currentHeart.data('idAudio');

    $.ajax({
        url: '/checkHeart',
        type: 'POST',
        data: { idAudio: audioId },
        success: function(response) {
            // 先清空所有相关类，再添加对应状态的类
            $currentHeart.removeClass('fa far text-danger text-dark');
            if (response === 1) {
                $currentHeart.addClass('fa text-danger');
            } else {
                $currentHeart.addClass('far text-dark');
            }
        },
        error: function() {
            // 请求失败时默认设为未点赞状态
            $currentHeart.removeClass('fa far text-danger text-dark').addClass('far text-dark');
        }
    });
});

核心要点 #

• 使用.each()替代普通for循环，每个迭代的this指向当前图标元素，从根源避免闭包问题
• 在AJAX请求前保存当前元素的引用$currentHeart，确保回调能准确操作目标图标
• 修改类时先移除所有相关类，防止不同状态的类冲突
• 增加错误处理分支，保证异常场景下图标状态有合理默认值

性能优化建议 #

如果页面中歌曲数量较多，建议合并为一次批量请求以减少HTTP请求开销：

// 收集所有音频ID
const audioIds = $('.fa-heart[data-idAudio]').map(function() {
    return $(this).data('idAudio');
}).get();

// 发起批量校验请求
$.ajax({
    url: '/checkHeartBatch',
    type: 'POST',
    data: { idAudios: audioIds },
    success: function(results) {
        // 后端需返回键值对格式：{ 音频ID: 点赞状态(1/0) }
        $('.fa-heart[data-idAudio]').each(function() {
            const $currentHeart = $(this);
            const audioId = $currentHeart.data('idAudio');
            const status = results[audioId];
            
            $currentHeart.removeClass('fa far text-danger text-dark');
            status === 1 ? $currentHeart.addClass('fa text-danger') : $currentHeart.addClass('far text-dark');
        });
    }
});

对应的ASP.NET Core后端需新增checkHeartBatch接口，接收音频ID数组并返回批量点赞状态。

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