Javascript 基于数组动态创建单击事件，并更改单击元素的格式

我有5个div标记，每个都有其唯一的类名，其中两个具有相同的类，但第二个具有额外的类（即“.cls2”和“.cls2.a”）。我将这些类放在一个数组中，并尝试创建一个click事件，其中包含数组中类的clicked元素将执行一些操作

这是我的HTML代码

<div class="cls1"></div>
<div class="cls2"></div>
<div class="cls3"></div>
<div class="cls4"></div>
<div class="cls2 a"></div>

下面是javascript：

var classList = [".cls1",".cls2",".cls3",".cls4",".cls2.a"];
var myColors = ["red","blue","pink","green","black"];
const myVar = document.querySelectorAll(classList);

for (const myVars of myVar) {
    myVars.addEventListener('click', function () {
        for (var x = 0; x < myVar.length; x++) {
            this.style.background = "lightblue";
            myVar[x].style.background = "purple";
            myVar[x].innerHTML = myVar[x].classList;                
        }
    })
}

var classList=[“.cls1”、“.cls2”、“.cls3”、“.cls4”、“.cls2.a”]；
var myColors=[“红色”、“蓝色”、“粉色”、“绿色”、“黑色”]；
const myVar=document.queryselectoral（类列表）；
for（常量myVar/myVar）{
myVars.addEventListener（'click'，函数（）{
对于（var x=0；x

所以我要做的是改变被点击的元素，把它的背景颜色改成一种独特的颜色，把所有其他元素改成另一种颜色。在本例中，单击的元素将变为“浅蓝色”，而所有其他元素将变为“紫色”。这很好，只是我正在努力弄清楚如何用var myColors中定义的颜色而不是“lightblue”来更改单击元素的颜色

---

我希望在没有jquery的纯javascript中实现这一点，而使用

forEach

，遍历

颜色数组，并分别选择具有相同索引的
。然后，添加的侦听器可以迭代所有div，分配静态颜色，同时将正在迭代的颜色添加到所选div：


const classList=[“.cls1”、“.cls2”、“.cls3”、“.cls4”、“.cls2.a”]；
常量颜色=[“红色”、“蓝色”、“粉色”、“绿色”、“黑色”]；
const divs=document.querySelectorAll（classList.join（'，'）；
颜色。forEach（（颜色，i）=>{
常数div=divs[i]；
div.addEventListener（'click'，function（）{
适用于（各分区中的常数分区）{
div.style.background=“紫色”；
}
div.style.background=颜色；
});
});
a
B
C
D
e
有更优雅的解决方案，如CertainPerformance的答案示例。如果您需要与原始想法相近的内容，下面的示例包含使其按预期工作所需的逻辑中的最小更改

var classList=[“.cls1”、“.cls2”、“.cls3”、“.cls4”、“.cls2.a”]；
var myColors=[“红色”、“蓝色”、“粉色”、“绿色”、“黑色”]；
const myVar=document.queryselectoral（类列表）；
for（常量myVar/myVar）{
myVars.addEventListener（'click'，函数（e）{
对于（var x=0；x
从阵列中选择哪种颜色？这非常有效。老兄，我已经为此奋斗了一整天，我终于决定吞下我的骄傲，寻求帮助哈哈。谢谢@CertainPerformance。