javascript - 有没有办法让这段代码更短

Question

第一个是这个

  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";
  }

我认为这是一场胜利 -lol。但说实话，我并不那么聪明，但即使我认为还有比这更简单的方法。

只是为了让您大致了解此脚本的一部分:

带有 10 张幻灯片的简单 slider
每张幻灯片有 5 个按钮
当其中一个按钮悬停时，包含特定图片的 div 帽子会出现，而其他按钮则隐藏。

所以我确实相信我需要那么多功能，但我认为有更好的方法来做到这一点

Answer 1

像这样的东西可能会起作用。

        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"]);