querySelectorAll多选元素后点击高亮效果不符合预期问题求助

你当前的问题根源在于点击事件里的类名添加逻辑：不管点击评分项里的图片还是文字，你都给触发事件的元素（event.target）和它的父元素同时加上了.active类，这就导致子元素（比如<img>或<small>）和父容器.ratings都被高亮，出现不符合预期的效果。另外，你也没有清除之前选中项的.active类，会导致多个评分项同时处于高亮状态。

解决方案 #

直接操作绑定事件的.ratings容器元素，而非event.target，同时先清除所有评分项的.active类，确保只有当前点击的项高亮。

修改后的JS代码

const ratingElements = document.querySelectorAll(".ratings");

ratingElements.forEach((ratingElement) => {
    ratingElement.addEventListener("click", () => {
        // 先清除所有评分项的active类，避免多选项高亮
        ratingElements.forEach(el => el.classList.remove("active"));
        // 给当前点击的评分容器添加active类
        ratingElement.classList.add("active");
        // 稳定获取评分文本
        const ratingText = ratingElement.querySelector("small").innerText;
        console.log(ratingText);
    });
});

可选CSS优化

原来的.active选择器是全局的，建议改成.ratings.active，避免影响页面其他元素：

.ratings:hover, .ratings.active {
  background: darkseagreen;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  color: aliceblue;
  transition: all 300ms ease;
}

逻辑说明 #

• 我们给每个.ratings元素直接绑定了点击事件，不管点击它内部的哪个子元素，事件都会冒泡到.ratings本身，所以用ratingElement就是我们要操作的目标容器，不需要再通过event.target查找父元素。
• 先遍历所有评分项移除.active类，确保每次只有一个选中项高亮。
• 通过querySelector("small")直接获取评分文本，比原来的逻辑更稳定，不会因为点击不同子元素出现异常。

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