多个同class按钮使用classList.toggle无法独立切换状态问题

实现书籍已读/未读标记按钮时，单按钮点击切换样式、修改文本的逻辑运行正常，但点击其他同class按钮时，之前按钮的激活状态会被清除，无法实现每个按钮独立切换状态、互不干扰的需求。

现有JS逻辑中，每次触发按钮点击事件时，都会遍历所有同class按钮，主动移除非当前点击按钮的clicked类——这段逻辑是为单选互斥场景设计的，和多按钮独立状态切换的需求冲突。另外用clickCount变量维护状态的方式可靠性较差，一旦DOM状态被其他逻辑修改，计数和实际展示会出现不一致。

只需要调整JavaScript逻辑即可，原有CSS和HTML结构无需改动：

const readButtons = document.querySelectorAll(".book__read-button");

readButtons.forEach((readButton) => {
  readButton.addEventListener("click", (e) => {
    // 仅切换当前点击按钮的激活类，不操作其他按钮
    const isRead = e.target.classList.toggle("clicked");
    // 直接根据类状态更新按钮文本，无需额外计数
    e.target.textContent = isRead ? "Read" : "Unread";
  });
});

• 删除了点击事件中遍历所有按钮、移除其他按钮clicked类的互斥逻辑，从根源上避免其他按钮状态被误改
• 移除了独立维护的clickCount变量，直接读取classList.toggle的返回值判断当前状态：类添加成功返回true（标记为已读），类移除成功返回false（标记为未读），保证DOM展示和内部状态完全同步

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