js案例（星级评论&明密文切换）

三生有幸ii

已于 2022-08-26 14:25:33 修改

阅读量252

点赞数

文章标签： javascript 前端开发语言

于 2022-08-26 14:23:00 首次发布

本文链接：https://blog.csdn.net/adminsir0/article/details/126542570

版权

星级评论&明密文切换（事件委托）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		
		<title></title>
		
		<style>
			.active{
				color: red;
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
		
			<span class="active">❤</span>
			
			<span>❤</span>
			
			<span>❤</span>
			
			<span>❤</span>
			
			<span>❤</span>
		</div>
		
		密码:<input type="password"><button>切换</button>
		
		<script>
			var _wrapper=document.querySelector(".wrapper");
			
			var _spans=document.querySelectorAll("span");
			
			_wrapper.onclick=function(event){
			
				//寻找事件源
				var target=event.srcElement||event.target;
				
				if(target.nodeName=="SPAN"){
				
					//找到span对应点击的index
					var index=Array.from(_spans).findIndex(function(tag){
					
						return tag==target;
					})
					
					//index之前的添加active，index之后的取消
					for (var i = 0; i < _spans.length; i++) {
					
						if(i<=index){
						
							_spans[i].className="active";
							
						}else{
						
							_spans[i].className="";
						}
					}
				}
			}
			
			//明文密文切换
			var _button=document.querySelector("button");
			var _input=document.querySelector("input");
			
			_button.onclick=function(){
			
				if(_input.type=="password"){
				
					_input.type="text";
					
				}else{
				
					_input.type="password";
					
				}
			}
		</script>
	</body>
</html>