使用JS实现多图片通用切换点赞按钮的问题咨询

原有代码核心问题 #

• 使用document.querySelector()仅能匹配到页面第一个符合条件的点赞按钮，因此只有单按钮生效
• HTML中重复使用相同id（icon、count），id属性全局唯一，重复id会导致DOM选择逻辑异常
• 点赞状态clicked、计数变量、图标元素均为全局唯一值，所有按钮共享同一份状态，无法独立计数

第一步：调整HTML结构 #

将按钮内的id属性替换为class属性，可重复添加多个点赞按钮对应不同图片，示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多图片点赞</title>
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
    <script src="index.js" defer></script>
    <link rel="stylesheet" href="index.css">
</head>
<body>   
    <!-- 第一张图对应点赞按钮 -->
    <button class="like__btn">
        <span class="icon"><i class="far fa-thumbs-up"></i></span>
        <span class="count">0</span> Like
     </button>   
     <!-- 第二张图对应点赞按钮 -->
     <button class="like__btn">
        <span class="icon"><i class="far fa-thumbs-up"></i></span>
        <span class="count">0</span> Like
     </button>
     <!-- 可继续新增更多按钮对应不同图片 -->
</body>
</html>

第二步：修改JS逻辑 #

通过循环为所有点赞按钮单独绑定事件，每个按钮的状态、计数相互独立，代码如下：

// 获取页面所有点赞按钮
const allLikeBtns = document.querySelectorAll(".like__btn");

// 遍历每个按钮单独绑定事件
allLikeBtns.forEach(likeBtn => {
    // 获取当前按钮内的图标、计数元素
    const likeIcon = likeBtn.querySelector(".icon");
    const count = likeBtn.querySelector(".count");
    // 每个按钮独立的点赞状态
    let clicked = false;

    likeBtn.addEventListener("click", () => {
        if (!clicked) {
            clicked = true;
            likeIcon.innerHTML = `<i class="fas fa-thumbs-up"></i>`;
            count.textContent = parseInt(count.textContent) + 1;
        } else {
            clicked = false;
            likeIcon.innerHTML = `<i class="far fa-thumbs-up"></i>`;
            count.textContent = parseInt(count.textContent) - 1;
        }
    });
});

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