【发布时间】：2014-11-19 14:08:42
【问题描述】：
我正在为一个图库使用脚本，在该脚本中单击导航中的一个元素只会显示一个 div，但会隐藏其他 div。
目前我的脚本非常具体，因为我需要为每个可能的实例添加一个新函数。见下文...您可以想象添加的图像越多，这种情况就越容易失控。
有人可以帮我使这段代码更通用和优雅吗？我对 Javascript/JQuery 不是很有经验，但这有点令人尴尬，哈哈
因此，如果从代码中不清楚：#li1、#li2、#li3 等是始终可见的导航缩略图。 #img1、#img2、#img3 等是变量显示的 div。当一个可见时，其余的应该隐藏。
其他问题：
对于每个显示的 #img1，我还想在单独的 div 中显示一个标题，比如 #title1、#title2 等。我该怎么做？因此，例如单击#li1 将显示#img1 和#title1，但隐藏所有其他#img.. 和#title..
所有 # 都包含图像。我注意到，当其中一个图像损坏时，整个脚本将停止正常工作（所有#img.. div 立即显示）。这是为什么呢？
此脚本实际上不会隐藏所有图像，直到所有内容都加载完毕，在本地运行 HTML 时您不会注意到这一点，但在等待图像下载时会这样做。我怀疑是因为 $("#li1").load(function() 指的是文档中更靠后的 div。我该如何解决这个问题？
我希望我没有问太多，我自己试图理解这一点，但我无法弄清楚。
$("#li1").load(function() {
$("#img2, #img3, #img4, #img5, #img6, #img7, #img8, #img9, #img10, #img0, #intro").hide();
$("#img1").show();
});
$("#li1").on('click', function() {
$("#img2, #img3, #img4, #img5, #img6, #img7, #img8, #img9, #img10, #img0").hide();
$("#img1").show();
});
$("#li2").on('click', function() {
$("#img1, #img3, #img4, #img5, #img6, #img7, #img8, #img9, #img10, #img0").hide();
$("#img2").show();
});
$("#li3").on('click', function() {
$("#img2, #img1, #img4, #img5, #img6, #img7, #img8, #img9, #img10, #img0").hide();
$("#img3").show();
});
etc.【问题讨论】：
-
你应该把这个问题发到codereview.stackexchange.com
-
我会为所有项目添加一个公共类。一个电话，您可以隐藏所有，然后显示 1
-
您能否展示一些 HTML 示例，看看那些
#li和一些父元素是什么？ -
如果没有 HTML，您的代码 sn-p 将毫无用处。
标签： javascript jquery html css