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

最新推荐文章于 2023-12-29 13:03:14 发布

原创最新推荐文章于 2023-12-29 13:03:14 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

js 专栏收录该内容

25 篇文章

订阅专栏

本文分享了从使用jQuery简化DOM操作到尝试原生JavaScript实现相同功能的经验。通过实例对比，介绍了如何用原生JS监听多个元素的点击事件并更新DOM，同时展示了不同方法在实现过程中的差异。

之前利用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;
					}
				}
			}

上面代码解决的问题是：