有没有办法使这段代码更短
Is there a way to make this code shorter
第一个是这个
function show1(){
document.getElementById("pic-1").style.visibility = "visible";
document.getElementById("pic-2").style.visibility = "hidden";
document.getElementById("pic-3").style.visibility = "hidden";
document.getElementById("pic-4").style.visibility = "hidden";
document.getElementById("pic-5").style.visibility = "hidden";
}
我有 50 个这样的...
有没有办法将它们中的一堆分组到一个数组中或其他东西中？只是想让你知道我是这一切的新手，所以当你认为这是一场灾难时
/* Slide 1 */
function show1(){
document.getElementById("pic-1").style.visibility = "visible";
document.getElementById("pic-2").style.visibility = "hidden";
document.getElementById("pic-3").style.visibility = "hidden";
document.getElementById("pic-4").style.visibility = "hidden";
document.getElementById("pic-5").style.visibility = "hidden";
}
function show2(){
document.getElementById("pic-2").style.visibility = "visible";
document.getElementById("pic-1").style.visibility = "hidden";
document.getElementById("pic-3").style.visibility = "hidden";
document.getElementById("pic-4").style.visibility = "hidden";
document.getElementById("pic-5").style.visibility = "hidden";
}
function show3(){
document.getElementById("pic-3").style.visibility = "visible";
document.getElementById("pic-2").style.visibility = "hidden";
document.getElementById("pic-1").style.visibility = "hidden";
document.getElementById("pic-4").style.visibility = "hidden";
document.getElementById("pic-5").style.visibility = "hidden";
}
function show4(){
document.getElementById("pic-4").style.visibility = "visible";
document.getElementById("pic-2").style.visibility = "hidden";
document.getElementById("pic-3").style.visibility = "hidden";
document.getElementById("pic-1").style.visibility = "hidden";
document.getElementById("pic-5").style.visibility = "hidden";
}
function show5(){
document.getElementById("pic-5").style.visibility = "visible";
document.getElementById("pic-2").style.visibility = "hidden";
document.getElementById("pic-3").style.visibility = "hidden";
document.getElementById("pic-4").style.visibility = "hidden";
document.getElementById("pic-1").style.visibility = "hidden";
}
/* Slide 2 */
function show21(){
document.getElementById("pic-21").style.visibility = "visible";
document.getElementById("pic-22").style.visibility = "hidden";
document.getElementById("pic-23").style.visibility = "hidden";
document.getElementById("pic-24").style.visibility = "hidden";
document.getElementById("pic-25").style.visibility = "hidden";
}
function show22(){
document.getElementById("pic-22").style.visibility = "visible";
document.getElementById("pic-21").style.visibility = "hidden";
document.getElementById("pic-23").style.visibility = "hidden";
document.getElementById("pic-24").style.visibility = "hidden";
document.getElementById("pic-25").style.visibility = "hidden";
}
function show23(){
document.getElementById("pic-23").style.visibility = "visible";
document.getElementById("pic-22").style.visibility = "hidden";
document.getElementById("pic-21").style.visibility = "hidden";
document.getElementById("pic-24").style.visibility = "hidden";
document.getElementById("pic-25").style.visibility = "hidden";
}
function show24(){
document.getElementById("pic-24").style.visibility = "visible";
document.getElementById("pic-22").style.visibility = "hidden";
document.getElementById("pic-23").style.visibility = "hidden";
document.getElementById("pic-21").style.visibility = "hidden";
document.getElementById("pic-25").style.visibility = "hidden";
}
function show25(){
document.getElementById("pic-25").style.visibility = "visible";
document.getElementById("pic-22").style.visibility = "hidden";
document.getElementById("pic-23").style.visibility = "hidden";
document.getElementById("pic-24").style.visibility = "hidden";
document.getElementById("pic-21").style.visibility = "hidden";
}
/* Slide 3 */
function show31(){
document.getElementById("pic-31").style.visibility = "visible";
document.getElementById("pic-32").style.visibility = "hidden";
document.getElementById("pic-33").style.visibility = "hidden";
document.getElementById("pic-34").style.visibility = "hidden";
document.getElementById("pic-35").style.visibility = "hidden";
}
function show32(){
document.getElementById("pic-32").style.visibility = "visible";
document.getElementById("pic-31").style.visibility = "hidden";
document.getElementById("pic-33").style.visibility = "hidden";
document.getElementById("pic-34").style.visibility = "hidden";
document.getElementById("pic-35").style.visibility = "hidden";
}
function show33(){
document.getElementById("pic-33").style.visibility = "visible";
document.getElementById("pic-32").style.visibility = "hidden";
document.getElementById("pic-31").style.visibility = "hidden";
document.getElementById("pic-34").style.visibility = "hidden";
document.getElementById("pic-35").style.visibility = "hidden";
}
function show34(){
document.getElementById("pic-34").style.visibility = "visible";
document.getElementById("pic-32").style.visibility = "hidden";
document.getElementById("pic-33").style.visibility = "hidden";
document.getElementById("pic-31").style.visibility = "hidden";
document.getElementById("pic-35").style.visibility = "hidden";
}
function show35(){
document.getElementById("pic-35").style.visibility = "visible";
document.getElementById("pic-32").style.visibility = "hidden";
document.getElementById("pic-33").style.visibility = "hidden";
document.getElementById("pic-34").style.visibility = "hidden";
document.getElementById("pic-31").style.visibility = "hidden";
}
/* Slide 4 */
function show41(){
document.getElementById("pic-41").style.visibility = "visible";
document.getElementById("pic-42").style.visibility = "hidden";
document.getElementById("pic-43").style.visibility = "hidden";
document.getElementById("pic-44").style.visibility = "hidden";
document.getElementById("pic-45").style.visibility = "hidden";
}
function show42(){
document.getElementById("pic-42").style.visibility = "visible";
document.getElementById("pic-41").style.visibility = "hidden";
document.getElementById("pic-43").style.visibility = "hidden";
document.getElementById("pic-44").style.visibility = "hidden";
document.getElementById("pic-45").style.visibility = "hidden";
}
function show43(){
document.getElementById("pic-43").style.visibility = "visible";
document.getElementById("pic-42").style.visibility = "hidden";
document.getElementById("pic-41").style.visibility = "hidden";
document.getElementById("pic-44").style.visibility = "hidden";
document.getElementById("pic-45").style.visibility = "hidden";
}
function show44(){
document.getElementById("pic-44").style.visibility = "visible";
document.getElementById("pic-42").style.visibility = "hidden";
document.getElementById("pic-43").style.visibility = "hidden";
document.getElementById("pic-41").style.visibility = "hidden";
document.getElementById("pic-45").style.visibility = "hidden";
}
function show45(){
document.getElementById("pic-45").style.visibility = "visible";
document.getElementById("pic-42").style.visibility = "hidden";
document.getElementById("pic-43").style.visibility = "hidden";
document.getElementById("pic-44").style.visibility = "hidden";
document.getElementById("pic-41").style.visibility = "hidden";
}
/* Slide 5 */
function show51(){
document.getElementById("pic-51").style.visibility = "visible";
document.getElementById("pic-52").style.visibility = "hidden";
document.getElementById("pic-53").style.visibility = "hidden";
document.getElementById("pic-54").style.visibility = "hidden";
document.getElementById("pic-55").style.visibility = "hidden";
}
function show52(){
document.getElementById("pic-52").style.visibility = "visible";
document.getElementById("pic-51").style.visibility = "hidden";
document.getElementById("pic-53").style.visibility = "hidden";
document.getElementById("pic-54").style.visibility = "hidden";
document.getElementById("pic-55").style.visibility = "hidden";
}
function show53(){
document.getElementById("pic-53").style.visibility = "visible";
document.getElementById("pic-52").style.visibility = "hidden";
document.getElementById("pic-51").style.visibility = "hidden";
document.getElementById("pic-54").style.visibility = "hidden";
document.getElementById("pic-55").style.visibility = "hidden";
}
function show54(){
document.getElementById("pic-54").style.visibility = "visible";
document.getElementById("pic-52").style.visibility = "hidden";
document.getElementById("pic-53").style.visibility = "hidden";
document.getElementById("pic-51").style.visibility = "hidden";
document.getElementById("pic-55").style.visibility = "hidden";
}
function show55(){
document.getElementById("pic-55").style.visibility = "visible";
document.getElementById("pic-52").style.visibility = "hidden";
document.getElementById("pic-53").style.visibility = "hidden";
document.getElementById("pic-54").style.visibility = "hidden";
document.getElementById("pic-51").style.visibility = "hidden";
}
/* Slide 6 */
function show1(){
document.getElementById("pic-61").style.visibility = "visible";
document.getElementById("pic-62").style.visibility = "hidden";
document.getElementById("pic-63").style.visibility = "hidden";
document.getElementById("pic-64").style.visibility = "hidden";
document.getElementById("pic-65").style.visibility = "hidden";
}
function show62(){
document.getElementById("pic-62").style.visibility = "visible";
document.getElementById("pic-61").style.visibility = "hidden";
document.getElementById("pic-63").style.visibility = "hidden";
document.getElementById("pic-64").style.visibility = "hidden";
document.getElementById("pic-65").style.visibility = "hidden";
}
function show63(){
document.getElementById("pic-63").style.visibility = "visible";
document.getElementById("pic-62").style.visibility = "hidden";
document.getElementById("pic-61").style.visibility = "hidden";
document.getElementById("pic-64").style.visibility = "hidden";
document.getElementById("pic-65").style.visibility = "hidden";
}
function show64(){
document.getElementById("pic-64").style.visibility = "visible";
document.getElementById("pic-62").style.visibility = "hidden";
document.getElementById("pic-63").style.visibility = "hidden";
document.getElementById("pic-61").style.visibility = "hidden";
document.getElementById("pic-65").style.visibility = "hidden";
}
function show65(){
document.getElementById("pic-65").style.visibility = "visible";
document.getElementById("pic-62").style.visibility = "hidden";
document.getElementById("pic-63").style.visibility = "hidden";
document.getElementById("pic-64").style.visibility = "hidden";
document.getElementById("pic-61").style.visibility = "hidden";
}
/* Slide 6 */
function show61(){
document.getElementById("pic-61").style.visibility = "visible";
document.getElementById("pic-62").style.visibility = "hidden";
document.getElementById("pic-63").style.visibility = "hidden";
document.getElementById("pic-64").style.visibility = "hidden";
document.getElementById("pic-65").style.visibility = "hidden";
}
function show62(){
document.getElementById("pic-62").style.visibility = "visible";
document.getElementById("pic-61").style.visibility = "hidden";
document.getElementById("pic-63").style.visibility = "hidden";
document.getElementById("pic-64").style.visibility = "hidden";
document.getElementById("pic-65").style.visibility = "hidden";
}
function show63(){
document.getElementById("pic-63").style.visibility = "visible";
document.getElementById("pic-62").style.visibility = "hidden";
document.getElementById("pic-61").style.visibility = "hidden";
document.getElementById("pic-64").style.visibility = "hidden";
document.getElementById("pic-65").style.visibility = "hidden";
}
function show64(){
document.getElementById("pic-64").style.visibility = "visible";
document.getElementById("pic-62").style.visibility = "hidden";
document.getElementById("pic-63").style.visibility = "hidden";
document.getElementById("pic-61").style.visibility = "hidden";
document.getElementById("pic-65").style.visibility = "hidden";
}
function show65(){
document.getElementById("pic-65").style.visibility = "visible";
document.getElementById("pic-62").style.visibility = "hidden";
document.getElementById("pic-63").style.visibility = "hidden";
document.getElementById("pic-64").style.visibility = "hidden";
document.getElementById("pic-61").style.visibility = "hidden";
}
/* Slide 7 */
function show71(){
document.getElementById("pic-71").style.visibility = "visible";
document.getElementById("pic-72").style.visibility = "hidden";
document.getElementById("pic-73").style.visibility = "hidden";
document.getElementById("pic-74").style.visibility = "hidden";
document.getElementById("pic-75").style.visibility = "hidden";
}
function show72(){
document.getElementById("pic-72").style.visibility = "visible";
document.getElementById("pic-71").style.visibility = "hidden";
document.getElementById("pic-73").style.visibility = "hidden";
document.getElementById("pic-74").style.visibility = "hidden";
document.getElementById("pic-75").style.visibility = "hidden";
}
function show73(){
document.getElementById("pic-73").style.visibility = "visible";
document.getElementById("pic-72").style.visibility = "hidden";
document.getElementById("pic-71").style.visibility = "hidden";
document.getElementById("pic-74").style.visibility = "hidden";
document.getElementById("pic-75").style.visibility = "hidden";
}
function show74(){
document.getElementById("pic-74").style.visibility = "visible";
document.getElementById("pic-72").style.visibility = "hidden";
document.getElementById("pic-73").style.visibility = "hidden";
document.getElementById("pic-71").style.visibility = "hidden";
document.getElementById("pic-75").style.visibility = "hidden";
}
function show75(){
document.getElementById("pic-75").style.visibility = "visible";
document.getElementById("pic-72").style.visibility = "hidden";
document.getElementById("pic-73").style.visibility = "hidden";
document.getElementById("pic-74").style.visibility = "hidden";
document.getElementById("pic-71").style.visibility = "hidden";
}
/* Slide 8 */
function show81(){
document.getElementById("pic-81").style.visibility = "visible";
document.getElementById("pic-82").style.visibility = "hidden";
document.getElementById("pic-83").style.visibility = "hidden";
document.getElementById("pic-84").style.visibility = "hidden";
document.getElementById("pic-85").style.visibility = "hidden";
}
function show82(){
document.getElementById("pic-82").style.visibility = "visible";
document.getElementById("pic-81").style.visibility = "hidden";
document.getElementById("pic-83").style.visibility = "hidden";
document.getElementById("pic-84").style.visibility = "hidden";
document.getElementById("pic-85").style.visibility = "hidden";
}
function show83(){
document.getElementById("pic-83").style.visibility = "visible";
document.getElementById("pic-82").style.visibility = "hidden";
document.getElementById("pic-81").style.visibility = "hidden";
document.getElementById("pic-84").style.visibility = "hidden";
document.getElementById("pic-85").style.visibility = "hidden";
}
function show84(){
document.getElementById("pic-84").style.visibility = "visible";
document.getElementById("pic-82").style.visibility = "hidden";
document.getElementById("pic-83").style.visibility = "hidden";
document.getElementById("pic-81").style.visibility = "hidden";
document.getElementById("pic-85").style.visibility = "hidden";
}
function show85(){
document.getElementById("pic-85").style.visibility = "visible";
document.getElementById("pic-82").style.visibility = "hidden";
document.getElementById("pic-83").style.visibility = "hidden";
document.getElementById("pic-84").style.visibility = "hidden";
document.getElementById("pic-81").style.visibility = "hidden";
}
/* Slide 9 */
function show91(){
document.getElementById("pic-91").style.visibility = "visible";
document.getElementById("pic-92").style.visibility = "hidden";
document.getElementById("pic-93").style.visibility = "hidden";
document.getElementById("pic-94").style.visibility = "hidden";
document.getElementById("pic-95").style.visibility = "hidden";
}
function show92(){
document.getElementById("pic-92").style.visibility = "visible";
document.getElementById("pic-91").style.visibility = "hidden";
document.getElementById("pic-93").style.visibility = "hidden";
document.getElementById("pic-94").style.visibility = "hidden";
document.getElementById("pic-95").style.visibility = "hidden";
}
function show93(){
document.getElementById("pic-93").style.visibility = "visible";
document.getElementById("pic-92").style.visibility = "hidden";
document.getElementById("pic-91").style.visibility = "hidden";
document.getElementById("pic-94").style.visibility = "hidden";
document.getElementById("pic-95").style.visibility = "hidden";
}
function show94(){
document.getElementById("pic-94").style.visibility = "visible";
document.getElementById("pic-92").style.visibility = "hidden";
document.getElementById("pic-93").style.visibility = "hidden";
document.getElementById("pic-91").style.visibility = "hidden";
document.getElementById("pic-95").style.visibility = "hidden";
}
function show95(){
document.getElementById("pic-95").style.visibility = "visible";
document.getElementById("pic-92").style.visibility = "hidden";
document.getElementById("pic-93").style.visibility = "hidden";
document.getElementById("pic-94").style.visibility = "hidden";
document.getElementById("pic-91").style.visibility = "hidden";
}
/* Slide 10 */
function show101(){
document.getElementById("pic-101").style.visibility = "visible";
document.getElementById("pic-102").style.visibility = "hidden";
document.getElementById("pic-103").style.visibility = "hidden";
document.getElementById("pic-104").style.visibility = "hidden";
document.getElementById("pic-105").style.visibility = "hidden";
}
function show102(){
document.getElementById("pic-102").style.visibility = "visible";
document.getElementById("pic-101").style.visibility = "hidden";
document.getElementById("pic-103").style.visibility = "hidden";
document.getElementById("pic-104").style.visibility = "hidden";
document.getElementById("pic-105").style.visibility = "hidden";
}
function show103(){
document.getElementById("pic-103").style.visibility = "visible";
document.getElementById("pic-102").style.visibility = "hidden";
document.getElementById("pic-101").style.visibility = "hidden";
document.getElementById("pic-104").style.visibility = "hidden";
document.getElementById("pic-105").style.visibility = "hidden";
}
function show104(){
document.getElementById("pic-104").style.visibility = "visible";
document.getElementById("pic-102").style.visibility = "hidden";
document.getElementById("pic-103").style.visibility = "hidden";
document.getElementById("pic-101").style.visibility = "hidden";
document.getElementById("pic-105").style.visibility = "hidden";
}
function show105(){
document.getElementById("pic-105").style.visibility = "visible";
document.getElementById("pic-102").style.visibility = "hidden";
document.getElementById("pic-103").style.visibility = "hidden";
document.getElementById("pic-104").style.visibility = "hidden";
document.getElementById("pic-101").style.visibility = "hidden";
}
我认为这是一场胜利——哈哈。但说真的，我不是那么聪明，但即使我认为有一种比这更容易的方法。
只是为了让您大致了解此脚本的一部分：
带有 10 张幻灯片
的简单滑块每张幻灯片有 5 个按钮
当其中一个按钮悬停时，div 帽子包含特定图片出现，而其他按钮则隐藏。
所以我确实相信我需要那么多的功能，但我认为有更好的方法来做到这一点
这样的东西可能会起作用。
function show(show, pictures) {
for (i = 0; i < pictures.length; i++) {
document.getElementById(pictures[i]).style.visibility = "hidden";
}
document.getElementById(show).style.visibility = "visible";
}
show('pic-1', ["pic-1","pic-2", "pic-3"]);
如果你想同时隐藏/显示代码中的一些元素，你总是可以向它们添加匹配的类，并将你的所有操作单元到一两段代码中。
例如：
function show1(){
$('.Class_for_all_elements_you_want_to_hide').css('display', 'none');
}
您需要显示的一次，等等，也应该这样做......
这取决于
执行此操作你的使用情况。如果要隐藏所有图像，则可以使用单行代码执行此操作喜欢
$('img').hide();
否则，如果您知道在相应事件中隐藏了所有图像，则可以在某个类下设置所有这些图像并隐藏该类
$('.classname').css('display', 'none');
或者，您可以将 imageid 设置为数组，并在循环的帮助下
function show(pic, slide) {
document.querySelectorAll("[id^=pic-"+slide+"]").style.visibility = "hidden";
document.getElementById("pic-"+slide+number).style.visibility = "visible";
}
此代码隐藏幻灯片的所有图片，之后仅显示您通过参数提供的图片
尽量不要重新创建轮子，一些很棒的库已经存在（您可以使用您的图像）
请参阅：https://github.com/hakimel/reveal.js
JSFiddle： http://jsfiddle.net/9d57a69f/
纯Javascript
showElement('elementIdToShow');
showElement('pic1'); // Call this way to show pic1
function showElement(id) {
var elements = document.getElementsByClassName("pic"); //This might fail in old browser versions. If you want to support those pick up all elements in another way, the logic can continue the same.
for(var i=0; i<elements.length; i++) {
elements[i].style.visibility = "hidden";
}
document.getElementById(id).style.visibility = "visible";
}
如果你可以使用JQuery
showElement('pic1');
function showElement(id) {
$('.pic').hide(); //Get all elements that contains class called pic and hide it
$("#"+id).show(); //Get element by a specific ID and show it
}
.HTML
<div id="pic1" class="pic">1</div>
<div id="pic2" class="pic">2</div>
<div id="pic3" class="pic">3</div>
<div id="pic4" class="pic">4</div>
<div id="pic5" class="pic">5</div>
相关文章：
- 无法限制所选复选框的数量(尝试了多个代码段）
- 返回按钮代码段的Jquery冲突
- 问号在这段代码中是什么意思
- 我怎样才能用速记函数来写这段代码
- 为什么jQuery代码段在没有IFrame的情况下可以工作，而在有IFrame时却不能工作
- 为什么在以下代码段中无法访问中的变量值
- 这段代码的含义是什么<%=一些可变的%>
- 崇高的jslint:任何忽略特定代码段的方法
- 为什么这两段代码返回的值不同
- 如何重复某段代码
- Mozilla并没有完美地执行这段代码，尽管它适用于Chrome和IE
- 将 JSP 变量输出到 JavaScript 代码段中
- 这段代码的含义是什么 'start = +start ||0;' 在 JavaScript 中
- Eloquent JS第5章中的这段代码是做什么的
- JQuery:这段代码是什么意思
- 这段代码中发生了什么
- 这段代码有什么问题(responsible html-css-js）
- 调试jQuery代码段
- 嵌套if语句中的else语句.这段代码如何知道要执行哪个else语句
- 这段代码的语法是什么
