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