堆棧內存溢出
  簡體   English   中英

有沒有辦法使這段代碼更短

[英]Is there a way to make this code shorter

 原文  2015-01-28 12:40:22  5   6    javascript/ slider

問題描述

第一個是這個 

  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帽子，而其他則變為隱藏。

所以我確實認為我需要大量的功能，但是我認為有更好的方法

6 個解決方案

解決方案1
 0  2015-01-28 12:48:11

這樣的事情可能會起作用。 

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

解決方案2
 0  2015-01-28 12:49:33

如果要同時隱藏/顯示代碼中的某些元素，則始終可以向它們添加匹配的類，並將所有操作合並為一兩個代碼段。

例如： 

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

對於需要顯示的內容，應該執行相同的操作，等等。

解決方案3
 0  2015-01-28 12:50:15

這取決於您的使用情況.. 如果您想隱藏所有圖像，則只需一行代碼即可 

$('img').hide();

另外，如果您知道所有圖像都隱藏在相應事件中，則可以將所有這些圖像設置在特定類下並隱藏該類 

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

否則，您可以將imageids設置為數組，並借助循環可以做到這一點

解決方案4
 0  2015-01-28 12:50:35

function show(pic, slide) {

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

該代碼隱藏了幻燈片的所有圖片，之后僅顯示了您通過參數給出的圖片

解決方案5
 0  2015-01-28 12:54:45

JSFiddle： http : //jsfiddle.net/9d57a69f/

純Java腳本 

 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>

解決方案6
 0  2015-01-28 12:56:12

盡量不要重新創建輪子，已經存在一些很棒的庫（您可以使用圖像）

參見： https : //github.com/hakimel/reveal.js

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 有什么辦法可以縮短代碼 有沒有辦法使這段代碼更短？ （反應收集器） 有沒有辦法讓這段代碼更短？ 如何使代碼更短？ 是否可以使此代碼更短？ 如何使這個jQuery代碼更短？ 如何使這個JavaScript代碼更短？ 有沒有更短的方法來編寫這個Jquery代碼？ 是否可以從代碼中制作 function 並使其更短？ jQuery：有沒有辦法使它更短，更優雅？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM