文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >有没有办法让这段代码变得更短？

问有没有办法让这段代码变得更短？
EN

Stack Overflow用户
提问于 2015-01-28 20:40:22
回答 6查看 83关注 0票数 1

第一个是这样的

代码语言：javascript
复制
  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个这样的……

有没有一种方法可以将它们组合成一个数组或其他什么？我只是想让你知道我是个新手，所以当你看到这是一场灾难时

代码语言：javascript
复制
  /* 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";
  }

我认为这是一次胜利的-lol。但说真的，我不是那么聪明，但我也认为有一种比这简单得多的方法。

给你一个概述，这个脚本是什么的一部分：

带有10张幻灯片的简单滑块

每张幻灯片有5个按钮

当其中一个按钮悬停时，会出现一个包含特定图片的div hat，而其他按钮则会隐藏起来。

因此，我确实认为我需要大量的函数，但我认为有更好的方法来做到这一点

javascript
slider
EN

回答 6

Stack Overflow用户

发布于 2015-01-28 20:48:11

像这样的东西可能行得通。

代码语言：javascript
复制
        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"]);
票数 0
EN

Stack Overflow用户

发布于 2015-01-28 20:49:34

如果您想同时隐藏/显示代码中的一些元素，您可以始终向它们添加匹配的类，并将所有操作单元到一段或两段代码中。

例如：

代码语言：javascript
复制
  function show1(){
    $('.Class_for_all_elements_you_want_to_hide').css('display', 'none');
  }

对于你需要显示的一次，也应该这样做，等等。

票数 0
EN

Stack Overflow用户

发布于 2015-01-28 20:50:16

这取决于你的用法。如果你想隐藏所有的图片，那么只需一行代码，你就可以像这样做

代码语言：javascript
复制
$('img').hide();

否则，如果您知道所有图像都隐藏在相应的事件中，那么您可以设置某个类下的所有这些图像，并隐藏该类

代码语言：javascript
复制
 $('.classname').css('display', 'none');

或者，您可以将imageid设置为数组，并在循环的帮助下执行此操作

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/28192517

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档