仅用HTML、JS、PHP实现多帖子独立带计数器点赞/点踩功能及交互异常修复

• HTML规范要求元素id全局唯一，循环渲染每篇帖子时，若给每篇的点赞、点踩按钮和计数区都用固定的like/dislike/result/result1作为id，浏览器只会识别页面最后渲染的那组id元素，这就是点击任意按钮都只更新最新发布帖子计数的直接原因
• 原有JS用全局localStorage存储点赞、点踩数，没有绑定帖子id、当前登录用户信息，既没法区分不同帖子的计数，也无法实现跨设备数据同步、同用户二选一的交互规则
• 原有数据库查询的SELECT字段列表没有获取Posts.postid，前端渲染时拿不到每篇帖子的唯一标识，根本没法定位对应的数据
• 前端渲染用户发布的内容时没有做转义处理，存在XSS注入风险

修正数据库查询逻辑 #

首先调整SQL语句，把帖子唯一id查询出来，同时对空的点赞、点踩计数做0值兜底，避免前端显示空白：

<?php
$db = new mysqli("localhost", "xxx", "xxx", "xxx");
if ($db->connect_error) {
    die ("Connection failed: " . $db->connect_error);
}
                
$q = " SELECT 
            Posts.postid,
            Posts.content, 
            Posts.time, 
            Users.screenname, 
            Users.dp, 
            IFNULL(Likes.totallikes, 0) AS totallikes,
            IFNULL(Dislikes.totaldislikes, 0) AS totaldislikes,
            Posts.repost, 
            Posts.original, 
            Posts.originaltime     
        FROM Posts 
            INNER JOIN Users ON (Users.username = Posts.author) 
            LEFT JOIN Likes ON (Posts.postid = Likes.postid) 
            LEFT JOIN Dislikes ON (Posts.postid = Dislikes.postid) 
        ORDER BY Posts.time DESC limit 100";

$result = $db->query($q);
// 循环遍历结果集渲染每篇帖子
while ($row = $result->fetch_assoc()) {
    // 单篇帖子渲染逻辑放在这个循环内
}
?>

修正前端HTML渲染逻辑 #

移除所有重复的固定id，改用data-*自定义属性存储帖子唯一id，用统一的类名做元素选择器，从根源上避免id冲突：

<!-- 循环内渲染的单篇帖子结构 -->
<div class="post-item" data-post-id="<?=$row['postid']?>">
    <h4><?=htmlspecialchars($row["screenname"])?> posted:</h4>
    <p><?=htmlspecialchars($row["content"])?></p>
    <p class="time"> <?=$row["time"]?> </p>

    <div class="row">
      <div class="column">
          <p>
            <button class="like-btn action-btn" 
                    type="button" 
                    data-post-id="<?=$row['postid']?>"
                    data-action="like">
              like <i class="fa">&#xf087;</i>
            </button>
          </p>
          <div class="like-count count" data-post-id="<?=$row['postid']?>">
            <?=$row["totallikes"]?> likes
          </div>
      </div>

      <div class="column">
          <p>
            <button class="dislike-btn action-btn" 
                    type="button" 
                    data-post-id="<?=$row['postid']?>"
                    data-action="dislike">
              dislike <i class="fa">&#xf088;</i>
            </button>
          </p>
          <div class="dislike-count count" data-post-id="<?=$row['postid']?>">
            <?=$row["totaldislikes"]?> dislikes
          </div>
      </div>
    </div>
</div>

注意：输出用户发布的文本时用htmlspecialchars()做转义，避免恶意脚本注入页面。

重写JS交互逻辑 #

删掉原有基于固定id、localStorage的计数逻辑，实现每篇帖子独立响应、点赞/点踩二选一的规则：

// 给所有交互按钮绑定统一的点击事件
document.querySelectorAll('.action-btn').forEach(btn => {
    btn.addEventListener('click', async function() {
        // 获取当前点击按钮对应的帖子id、动作类型
        const postId = this.dataset.postId;
        const action = this.dataset.action;
        // 定位当前帖子的所有相关元素
        const postRoot = this.closest('.post-item');
        const likeBtn = postRoot.querySelector('.like-btn');
        const dislikeBtn = postRoot.querySelector('.dislike-btn');
        const likeCountEl = postRoot.querySelector('.like-count');
        const dislikeCountEl = postRoot.querySelector('.dislike-count');

        // 重复点击已激活的按钮，执行取消操作
        if (this.classList.contains('active')) {
            this.classList.remove('active');
            if (action === 'like') {
                likeCountEl.textContent = `${parseInt(likeCountEl.textContent) - 1} likes`;
            } else {
                dislikeCountEl.textContent = `${parseInt(dislikeCountEl.textContent) - 1} dislikes`;
            }
            // 发请求通知后端删除当前用户对该帖子的互动记录
            await fetch('handle_interaction.php', {
                method: 'POST',
                body: new URLSearchParams({
                    post_id: postId,
                    op: 'cancel'
                })
            });
            return;
        }

        // 切换到另一类动作时，自动取消之前的选择
        if (action === 'like' && dislikeBtn.classList.contains('active')) {
            dislikeBtn.classList.remove('active');
            dislikeCountEl.textContent = `${parseInt(dislikeCountEl.textContent) - 1} dislikes`;
        }
        if (action === 'dislike' && likeBtn.classList.contains('active')) {
            likeBtn.classList.remove('active');
            likeCountEl.textContent = `${parseInt(likeCountEl.textContent) - 1} likes`;
        }

        // 激活当前选择的动作，更新本地显示的计数
        this.classList.add('active');
        if (action === 'like') {
            likeCountEl.textContent = `${parseInt(likeCountEl.textContent) + 1} likes`;
        } else {
            dislikeCountEl.textContent = `${parseInt(dislikeCountEl.textContent) + 1} dislikes`;
        }

        // 发请求通知后端保存当前用户的选择，更新数据库中的总计数
        await fetch('handle_interaction.php', {
            method: 'POST',
            body: new URLSearchParams({
                post_id: postId,
                op: action
            })
        });
    })
})

后端接口注意事项 #

新建handle_interaction.php处理前端传来的互动请求，需要遵循几个核心规则：

• 必须先校验当前用户的登录状态，未登录时直接拦截互动请求，避免匿名刷数
• 每个用户对单篇帖子只允许存在一条互动记录：如果用户从点赞切换为点踩，先删除之前的点赞记录、给总点赞数减1，再插入点踩记录、给总点踩数加1
• 所有计数的增减操作必须由后端在数据库层完成，不能完全信任前端传来的计数值，操作完成后把最新的总计数返回给前端做校正
• 彻底删除原有的localStorage计数逻辑：因为localStorage存储在用户本地浏览器，换设备、清缓存后数据就会丢失，没法做全局统一的点赞/点踩统计

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