Javascript 循环函数document.getElementById（）

所以我使用了三个唯一的ID“titleselected0”、“titleselected1”、“titleselected2”。每个都有一个onclick函数，该函数运行函数“myFunction0”、“myFunction1”、“myFunction2”。我用这个来改变样式。我的问题是我是否可以使用循环，所以我只需要使用一个函数而不是三个

.崩溃{
显示：无；
}
.崩溃{
显示：块；
}
.头衔{
背景色：#005FAA；
边界：无；
边界半径：0；
填充：30px；
}
.标题：悬停{
背景色：#009cde；
边界：无；
边界半径：0；
填充：30px；
}
.集装箱{
边缘顶部：25px；
浮动：左；
宽度：32%；
保证金权利：2%；
}
.容器：最后一个孩子{
右边距：0px；
宽度：32%；}
@仅介质屏幕和（最大宽度：800px）{
.集装箱{
边缘顶部：15px；
宽度：100%；
}
.容器：最后一个孩子{
边缘顶部：15px；
宽度：100%；
}
}
.titleselected{
背景色：#009cde；
边界：无；
边界半径：0；
填充：30px；
}
测试测试测试测试测试


测试测试测试测试测试
测试测试测试测试测试
测试测试测试测试测试

测试测试测试：


测试测试测试测试测试
测试测试测试测试测试
测试测试测试测试测试
测试测试测试测试测试

测试测试测试：


测试测试测试测试测试
测试测试测试测试测试
测试测试测试测试测试
测试测试测试测试测试
测试测试测试测试测试
测试测试测试测试测试

测试测试测试：


测试测试测试测试测试
测试测试测试测试测试

函数myFunction0（）{
var元素=document.getElementById（“titleselected0”）；
element.classList.toggle（“titleselected”）；
}
函数myFunction1（）{
var元素=document.getElementById（“titleselected1”）；
element.classList.toggle（“titleselected”）；
}
函数myFunction2（）{
var元素=document.getElementById（“titleselected2”）；
element.classList.toggle（“titleselected”）；
}

这些元素已经有一个

类
的
title
，因此您可以循环所有
。title
元素并附加侦听器：

document.querySelectorAll('.title').forEach((element) => {
  element.addEventListener('click', () => {
    element.classList.toggle("titleselected");
  });
});

（可以随意删除所有的
id
s和内联属性
onclick
处理程序-最好使用Javascript而不是HTML附加侦听器）

您还可以在包含所有
.title
s的容器上使用事件委派：

<div class="container-for-all">
   <div class="container">
     ...
   </div>
   <div class="container">
     ...
   </div>
   <!-- etc -->

document.querySelector('.container-for-all').addEventListener('click', ({ target }) => {
  const closestTitle = target.closest('.title');
  if (!closestTitle) {
    return;
  }
  closestTitle.classList.toggle('titleselected');
});