jQuery里的排他思想

jQuery里的排他思想

JQueryqingyu2020-10-30 1:07:011156A+A-

  jQuery里的排他思想

  想要多选一的效果,排他思想,当前元素设置样式,其他兄弟元素清除样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery.min.js"></script>
	</head>
	<body>
		<button>快速</button>
		<button>快速</button>
		<button>快速</button>
		<button>快速</button>
		<button>快速</button>
		<button>快速</button>
		<button>快速</button>
		<button>快速</button>
	</body>
	<script>
		
		$(function(){
			//1.隐式迭代 给所有按钮都绑定了点击事件
			$("button").click(function(){
					//2.当前元素变化背景颜色
					$(this).css("background","red");
					//3.其余兄弟去掉背景颜色
					$(this).siblings("button").css("background","");
			});
		})
	</script>
	
</html>

1.png

点击这里复制本文地址 欢迎来到大黄鸡源码分享网
qrcode

大黄鸡源码编程网 © All Rights Reserved.  
网站备案号:闽ICP备18012015号-4
Powered by Z-BlogPHP
联系我们| 关于我们| 广告联系| 网站管理