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

先说明需求：一个页面有多个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，感觉代码也不是那么臃肿了，简洁，高效～
如果有什么更好的方法，请留言告诉我，分享就是快乐～