Javascript对于一堆相同的class的元素保持监听（原生实现和jQuery实现）

之前利用jQuery的时候感觉很简单，没啥坎坷。注意这里面this的利用就能解决很多问题。

$(document).ready(function(){
	$(".te").click(function(){
		$("h2").html(this.text+"1");
		$.post('NewFile.jsp',{
			name:this.text,
			password:$("#pas").val()
		},function(data,status){
			if(status=="success"){
				if(data!="")
					{
					$("h2").html(data);
					}
				else{
					console.log("wrong");
				}
			}
		})
	});
	
});//之前写的一个微型的传输与回馈过程；

后来想写原生js，发现这种思路不行，后来查了查发现你得写个循环都监听一遍才行：

var chooseColors = function() {
				for (let i = 0; i < colors.length; i++) {
					colors[i].onclick = function() {
						colors[index].innerHTML="";
						index=i;
						let html = "<span class=\"mui-icon mui-icon-star\" style=\"color:red;width:50px;height:50px;\"></span>";
						this.innerHTML = html;
					}
				}
			}

上面代码解决的问题是：

上图监听这一堆东西的时候，点一个，标一个小红色五角星。再点，删除原来位置的，加一个新的五角星。亲，这边建议你拿着试一下呢！~~~