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

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

我认为这是一场胜利。但说真的，我并不那么聪明，但即便如此，我认为还有一种比这更简单的方法。

并且只是为了概述这个脚本的一部分：

带10个幻灯片的简单滑块
每张幻灯片有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"]);

Answer 2

如果你想同时隐藏/显示你代码中的某些元素，你可以随时添加匹配类，并将所有操作单元化为一个或两个代码。

例如：

  function show1(){
    $('.Class_for_all_elements_you_want_to_hide').css('display', 'none');
  }

对于您需要显示的曾经等等，应该这样做......

Answer 3

这取决于您的使用情况.. 如果您想隐藏所有图片，那么您可以使用单行代码 喜欢

$('img').hide();

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

 $('.classname').css('display', 'none');

或者你可以将imageids设置为数组，并且在循环的帮助下你可以这样做

Answer 4

function show(pic, slide) {

document.querySelectorAll("[id^=pic-"+slide+"]").style.visibility = "hidden";
    document.getElementById("pic-"+slide+number).style.visibility = "visible";
}

此代码隐藏幻灯片的所有图片，之后只显示参数

给出的图片

Answer 5

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>

Answer 6

尽量不要重新创建滚轮，一些很棒的库已经存在（你可以使用你的图像）

请参阅：https://github.com/hakimel/reveal.js