如何通过JavaScript修改Twig循环渲染的标题点击时的背景色

• 你在Twig循环中给所有h5标签设置了相同的id值txt-msg，而HTML规范要求id必须是页面唯一值，因此document.getElementById()永远只会匹配到页面第一个出现的txt-msg元素，导致点击任意标题都只会修改第一个标题的样式。

不用生成唯一id，直接将当前点击的元素实例传递给JS函数即可，修改成本最低：

1. 修改Twig模板代码 #

找到h5标签的行，调整为以下内容：

<h5 onclick="viewMessage(this)">{{msg.to_name}} <span class="chat_date">{{msg.time}}</span></h5>

注：不需要再给h5设置重复的id，如果你有其他业务需要用到id，可以用Twig的循环变量生成唯一id：id="txt-msg-{{loop.index}}"

2. 修改JavaScript代码 #

function viewMessage(el){
  // 如果需要点击其他标题时取消上一个的选中效果，可取消注释下面两行代码
  // document.querySelectorAll('.chat_ib h5').forEach(item => item.style.backgroundColor = 'transparent');
  el.style.backgroundColor = 'green';
}

建议把样式逻辑放到CSS中，代码可维护性更高：

1. 先添加CSS样式：

.chat_ib h5.active {
  background-color: green;
}

2. 修改JS代码：

function viewMessage(el){
  // 移除所有标题的选中状态
  document.querySelectorAll('.chat_ib h5').forEach(item => item.classList.remove('active'));
  // 给当前点击的标题加选中状态
  el.classList.add('active');
}

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