让一组div显示和隐藏的jquery特效

最新推荐文章于 2021-06-03 03:20:45 发布

雪狼MJ

最新推荐文章于 2021-06-03 03:20:45 发布

阅读量953

点赞数 1

CC 4.0 BY-SA版权

分类专栏：编程心得文章标签： jquery

本文链接：https://blog.youkuaiyun.com/tonybest985/article/details/45167227

编程心得专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种优化多个div和button交互的方法，通过使用数组存储元素关系并编写函数来简化代码，实现点击特定按钮时仅显示对应的div，同时隐藏其他div。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先说明需求：一个页面有多个div和button，一个div对应一个button，需要在点击的某个button的时候，显示对应的div，其余div隐藏

很简单，挨个写事件，在每个button的单击事件写入让本button对应的div显示，其他的隐藏。直接上代码：

$(document).ready(function(){

	$('#btn-div1').click(function(){
		$("#div1").show();
		$("#div2").hide();
		$("#div3").hide();
		$("#div4").hide();
	});

	$('#btn-div2').click(function(){
		$("#div1").hide();
		$("#div2").show();
		$("#div3").hide();
		$("#div4").hide();
	});

	$('#btn-div3').click(function(){
		$("#div1").hide();
		$("#div2").hide();
		$("#div3").show();
		$("#div4").hide();
	});

	$('#btn-div4').click(function(){
		$("#div1").show();
		$("#div2").hide();
		$("#div3").hide();
		$("#div4").show();
	});

});

很好不是吗，解决了问题，已测试正常通过，nice work。

但是，雇主忽然又来了消息：需要加五组button和div。对很简单，再继续写上去，我估计换谁都有点不情愿了，设想一下，如果用户再让添加十个呢？二十个呢？更多呢？

得优化代码啊，效率啥的先不说，至少不能一直这样做很多无用功啊。

想了半天，用一个数组组织关系对，然后用函数优化操作，上代码：

$(document).ready(function(){  
	$("#div1").show();
	var name = ['#div1', '#div2', '#div3', '#div4'];
	$('#btn-div1').click(function(){
		test(0, name);
	});
	$('#btn-div2').click(function(){
		test(1, name);
	});
	$('#btn-div3').click(function(){
		test(2, name);
	});
	$('#btn-div4').click(function(){
		test(3, name);
	});
});

function test(m, name){
	$.each(name, function(n, item){
		if(m == n){
			$(item).show();
		}else{
			$(item).hide();
		}
	});
}

当有新的关系对添加进来，只需要在数组中添加新的元素，就OK，感觉代码也不是那么臃肿了，简洁，高效～

如果有什么更好的方法，请留言告诉我，分享就是快乐～