jQuery显示/隐藏多个库

我在一个页面上有三个库，希望它们能够用简单的jQuery显示/隐藏技术显示

图库工作得很完美，但将来可能会有更多的预览图库展示

到目前为止我所做的：

$(document).ready(function(){

$('#gallery1').click(function() {
  $('#gallery').hide();
  $('#previewGallery1').show();
});

$('#showGallery1').click(function() {
  $('#gallery').show();
  $('#previewGallery1').hide();
});

$('#gallery2').click(function() {
  $('#gallery').hide();
  $('#previewGallery2').show();
});

$('#showGallery2').click(function() {
  $('#gallery').show();
  $('#previewGallery2').hide();
});

$('#gallery3').click(function() {
  $('#gallery').hide();
  $('#previewGallery3').show();
});

$('#showGallery3').click(function() {
  $('#gallery').show();
  $('#previewGallery3').hide();
});

});

需要一些帮助才能在此处添加更多通用代码：）

---

提前谢谢

您可以使用html数据属性来完成

$（文档）.ready（函数（）{
$（“[data show gallery]”。单击（函数（）{
$（“[data gallery preview]”）。hide（）；//请随意使用此处安装的类
$（'[data gallery='+$（this.attr（“data show gallery”）+']'）.show（）；
});
$（“[data close gallery]”。单击（function（）{//请随意使用此处安装的类
$（“[data gallery preview]”）。show（）；//请在此处随意使用所安装的类
$（“[data gallery]”）。hide（）；//请随意使用此处介绍的类
});
});
#图库{
背景：橙色；
宽度：100%；
}
.预览图像{
边框：1px纯红；
背景：绿色；
高度：250px；
宽度：30%；
利润率：1%；
浮动：左；
光标：指针；
}
.previewGallery{
利润率：1%；
背景：蓝色；
}
[资料廊]{
显示：无；
}
.previewThumb{
背景：橙色；
浮动：左；
宽度：150px；
高度：150像素；
利润率：1%；
}
a{color:#fff；}

在画廊上方。。。
预览图像库1
预览图像库2
预览图像库3
预览图库1
拇指1
拇指2
拇指3
拇指4
拇指5
拇指6
预览画廊2
拇指1
拇指2
拇指3
拇指4
拇指5
拇指6
预览画廊3
拇指1
拇指2
拇指3
拇指4
拇指5
拇指6
下面是图库…
这很好，对我很有帮助！现在BE Dev不会再杀我了：）很多thx！