JS点谁 谁变色

  效果图比我描述的清楚，需要自取，不懂就问。

别看代码一般，
实则短小精悍，
类似单击切换，
用途十分广泛。

代码、用途详解：
首先 var h1s = … 获取Dom节点
此时的 h1s 是一个数组，数组里存放了4个< h1>标签，它们的下标为 “ 0,1,2,3 ”，
若我想操作第一个，就写：
h1s[0].οnclick=function(){}
想操作第二个，就写：
h1s[1].οnclick=function(){}

现在我想操作所有的h1标签，实现点击h1，该 h1 字体颜色更改为红色。
我使用 for of 遍历这个数组

for(let i of h1s){
	console.log(i);
};

打印结果为：

那我想点谁谁变色，直接在 for 循环内部加点击事件
i.οnclick=function(){ i.style.color=‘red’; }
意为：此时的 i 被点击了，此时的 i 将执行function(){  } 内部的语句
语句是：i.style.color=‘red’;
因此：当前下标为 i 的 h1，字体变为红色字体。

那我只想让当前 h1 的字体变为 红色，让刚刚点过的 h1 颜色变回去该怎么办？
这么办：

i.οnclick=function(){
	for(let t of h1s){
		t.style.color='black';
	}
	i.style.color='red';
}

在你添加颜色之前，再遍历一次，让当前的所有 h1 字体变回原来的颜色，然后我再添加，因为代码的执行顺序是从上到下，所以两段执行语句不能交换位置。
如果此代码中你还有些许问题，或是前端相关问题，均可以在底部留言。

我是 “ 我不是费圆 ”，一个正在努力的人。入驻CSDN一年，代码全是开源，不懂你就留言，下班我会查看，请你看看分栏，不用打赏点赞，没人为我宣传，我为自己代言。