如何仅修改被点击的、拥有相同类名的单个按钮样式

问题根源 #

你当前的代码会选中页面内所有带fa-thumbs-up类的元素，遍历修改颜色后自然会导致全部点赞按钮变色。

解决方案 #

方案1：最小改动适配原有写法

给内联点击事件传递当前点击元素this，仅修改该元素内部的点赞图标样式：

1. 修改HTML按钮代码：

<button class="like" onclick="like(this)"><i class="fa fa-thumbs-up"></i></button>

2. 修改JS逻辑：

function like(clickedBtn) {
  // 只选中当前点击按钮内的点赞图标
  const targetIcon = clickedBtn.querySelector('.fa-thumbs-up')
  targetIcon.style.color = "orange"
}

方案2：更易维护的事件绑定写法（无需内联onclick）

直接通过JS给所有点赞按钮绑定事件，不需要在HTML里写onclick属性：

1. HTML简化为：

<button class="like"><i class="fa fa-thumbs-up"></i></button>

2. JS逻辑：

// 给所有点赞按钮批量绑定点击事件
document.querySelectorAll('.like').forEach(btn => {
  btn.addEventListener('click', function() {
    this.querySelector('.fa-thumbs-up').style.color = 'orange'
  })
})

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