Django模板结合JS实现动态点赞/取消点赞按钮异常问题求助

问题根因 #

• 单条帖子生成多个无效按钮：模板层错误遍历用户全部点赞列表判断单条帖子的点赞状态，用户点赞过N条帖子时，每条帖子都会被循环判断N次，对应生成N个点赞/取消点赞按钮
• 点击后无新按钮生成：JS逻辑仅实现了原有按钮的删除，未补充对应相反状态的新按钮；同时页面存在大量重复ID（相同id的like/unlike/page_id元素重复出现），导致DOM选择逻辑不可靠

修复步骤 #

1. 修正模板层判断逻辑 #

删除原有遍历liked列表的冗余代码，直接判断当前帖子是否在用户点赞列表中即可，同时用自定义属性存储帖子ID，避免重复ID问题，替换index.html中点赞按钮相关代码为：

{% if user.is_authenticated %}
    {% if page.id in liked %}
        <span><button class="btn btn-secondary like-btn" data-action="unlike" data-post-id="{{page.id}}">取消点赞</button></span>
    {% else %}
        <span><button class="btn btn-secondary like-btn" data-action="like" data-post-id="{{page.id}}">点赞</button></span>
    {% endif %}
{% endif %}

同步修改视图层index函数，将点赞列表转换为帖子ID集合，提升模板判断效率：

def index(request):
    # 原有逻辑不变
    liked_posts = set(Like.objects.filter(user=user_info).values_list('liked_post_id', flat=True))
    return render(request, "network/index.html", {
        "pages": page_obj,
        "liked": liked_posts
    })

2. 重写JS点赞交互逻辑 #

无需删除重建按钮，直接修改按钮状态即可，简化逻辑如下：

function initLikeBtn() {
    document.querySelectorAll('.like-btn').forEach(btn => {
        btn.onclick = () => {
            const postId = btn.dataset.postId;
            const currentAction = btn.dataset.action;
            const likesSpan = btn.closest('.card-footer').querySelector('#likes');
            let likeCount = parseInt(likesSpan.textContent);

            // 调用原有后台请求接口
            like(postId, currentAction);
            
            // 更新点赞数和按钮状态
            if (currentAction === 'like') {
                likeCount++;
                btn.textContent = '取消点赞';
                btn.dataset.action = 'unlike';
            } else {
                likeCount = Math.max(0, likeCount - 1);
                btn.textContent = '点赞';
                btn.dataset.action = 'like';
            }
            likesSpan.textContent = `${likeCount}人点赞了该帖子`;
        }
    })
}

// 页面加载完成后初始化点赞按钮
document.addEventListener('DOMContentLoaded', initLikeBtn);

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