JavaScript排他思想小例子之按钮的点击效果

最新推荐文章于 2024-07-07 20:19:55 发布

Tea-pd

最新推荐文章于 2024-07-07 20:19:55 发布

阅读量1.3k

点赞数 25

分类专栏： js学习文章标签： JavaScript 排他思想点击事件样式修改前端开发

本文链接：https://blog.csdn.net/tea_tea_/article/details/126471811

版权

js学习专栏收录该内容

27 篇文章 4 订阅

订阅专栏

什么是排他思想简单来说就是干掉所有人，留下我自己，亦或者是说，所有人带着自己都干掉，然后自己出一个复活甲，接下来用代码进行演示

首先：框架，这里我们先添加上5个按钮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
		<button>按钮</button>
		<button>按钮</button>
		<button>按钮</button>
		<button>按钮</button>
		<button>按钮</button>
	</body>

	<script>
	
	</script>
</html>

第二步：js代码获取元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
		<button>按钮</button>
		<button>按钮</button>
		<button>按钮</button>
		<button>按钮</button>
		<button>按钮</button>
	</body>

	<script>
		var btns = document.querySelectorAll('button')
		
	</script>
</html>

第三步：添加点击事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
		<button>按钮</button>
		<button>按钮</button>
		<button>按钮</button>
		<button>按钮</button>
		<button>按钮</button>
	</body>

	<script>
		var btns = document.querySelectorAll('button')
				
				btns.onclick = function(){					
																
			}											
		
	</script>
</html>

这里的话我们的目的是给每一个按钮添加一个点击事件，但queeryselectorall 有一个重点，他获取到的是一个伪数组，所以我们这样写是错的，要借助for循环来遍历出每一个元素

第四步：修改

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
		<button>按钮</button>
		<button>按钮</button>
		<button>按钮</button>
		<button>按钮</button>
		<button>按钮</button>
	</body>

	<script>
		var btns = document.querySelectorAll('button')
		
			for(var i=0;i<btns.length;i++){
				
			
				btns[i].onclick = function(){					
			
																
			}											
		
	</script>
</html>

这样的话就成功给每一个按钮添加上了点击事件，接下来我们给这些按钮添加一个点击改变背景颜色的效果

第五步：添加样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
		<button>按钮</button>
		<button>按钮</button>
		<button>按钮</button>
		<button>按钮</button>
		<button>按钮</button>
	</body>

	<script>
		var btns = document.querySelectorAll('button')
		
			for(var i=0;i<btns.length;i++){
				
			
				btns[i].onclick = function(){					
			
			
				this.style.backgroundColor = 'red'																		
				}															
			}											
		
	</script>
</html>

大家会看见我点击了2个按钮，但2个按钮却都红了，这显然不是我们想要的效果，所以我们要用到排他思想来写

第六步：排他

排他思想简单来说就是干掉所有人，留下我自己，亦或者是说，所有人带着自己都干掉，然后自己出一个复活甲，一定要记住顺序不能颠倒，首先清除所有样式，然后在设置自己。清除所有样式，那怎么才能把所有的样式清除呢，所以这里又要借助for循环遍历给每一个元素清除样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
		<button>按钮</button>
		<button>按钮</button>
		<button>按钮</button>
		<button>按钮</button>
		<button>按钮</button>
	</body>

	<script>
		var btns = document.querySelectorAll('button')
		
			for(var i=0;i<btns.length;i++){
				
			
				btns[i].onclick = function(){					
			
				for(var i=0;i<btns.length;i++){
					btns[i].style.backgroundColor = 'yellow'	
				}				
	
				this.style.backgroundColor = 'red'																		
				}															
			}											
		
	</script>
</html>

这样的话就达到了我们想要的效果，这里为了方便观察，我给每一个元素添加了黄色背景