如何簡化我的javascript代碼，看起來太長而且凌亂？

這段代碼基本上使得我的頁面上有7個標籤，onclick，改變另一個div標籤的內容。代碼有效，但時間太長。我想也許有些事情要做，否則如果語句，但我是新來的JavaScript，我不認爲我在那裏呢。如何簡化我的javascript代碼，看起來太長而且凌亂？

<script> 
      function showBaseChakra(text) { 
       if(text.id == "baseChakra") { 
        document.getElementById("baseChakraInfo").style.display = "block"; 
        document.getElementById("defaultText").style.display = "none"; 
        document.getElementById("sacralChakraInfo").style.display = "none"; 
        document.getElementById("solarPlexusChakraInfo").style.display = "none"; 
        document.getElementById("heartChakraInfo").style.display = "none"; 
        document.getElementById("throatChakraInfo").style.display = "none"; 
        document.getElementById("browChakraInfo").style.display = "none"; 
        document.getElementById("crownChakraInfo").style.display = "none"; 
       } 
      } 

      function showSacralChakra(text) { 
       if(text.id == "sacralChakra") { 
        document.getElementById("sacralChakraInfo").style.display = "block"; 
        document.getElementById("defaultText").style.display = "none"; 
        document.getElementById("baseChakraInfo").style.display = "none"; 
        document.getElementById("solarPlexusChakraInfo").style.display = "none"; 
        document.getElementById("heartChakraInfo").style.display = "none"; 
        document.getElementById("throatChakraInfo").style.display = "none"; 
        document.getElementById("browChakraInfo").style.display = "none"; 
        document.getElementById("crownChakraInfo").style.display = "none"; 
       } 
      } 

      function showSolarPlexusChakra(text) { 
       if(text.id == "solarPlexusChakra") { 
        document.getElementById("solarPlexusChakraInfo").style.display = "block"; 
        document.getElementById("defaultText").style.display = "none"; 
        document.getElementById("baseChakraInfo").style.display = "none"; 
        document.getElementById("sacralChakraInfo").style.display = "none"; 
        document.getElementById("heartChakraInfo").style.display = "none"; 
        document.getElementById("throatChakraInfo").style.display = "none"; 
        document.getElementById("browChakraInfo").style.display = "none"; 
        document.getElementById("crownChakraInfo").style.display = "none"; 
       } 
      } 

      function showHeartChakra(text) { 
       if(text.id == "heartChakra") { 
        document.getElementById("heartChakraInfo").style.display = "block"; 
        document.getElementById("defaultText").style.display = "none"; 
        document.getElementById("baseChakraInfo").style.display = "none"; 
        document.getElementById("sacralChakraInfo").style.display = "none"; 
        document.getElementById("solarPlexusChakraInfo").style.display = "none"; 
        document.getElementById("throatChakraInfo").style.display = "none"; 
        document.getElementById("browChakraInfo").style.display = "none"; 
        document.getElementById("crownChakraInfo").style.display = "none"; 
       } 
      } 

      function showThroatChakra(text) { 
       if(text.id == "throatChakra") { 
        document.getElementById("throatChakraInfo").style.display = "block"; 
        document.getElementById("defaultText").style.display = "none"; 
        document.getElementById("baseChakraInfo").style.display = "none"; 
        document.getElementById("sacralChakraInfo").style.display = "none"; 
        document.getElementById("solarPlexusChakraInfo").style.display = "none"; 
        document.getElementById("heartChakraInfo").style.display = "none"; 
        document.getElementById("browChakraInfo").style.display = "none"; 
        document.getElementById("crownChakraInfo").style.display = "none"; 
       } 
      } 

      function showBrowChakra(text) { 
       if(text.id == "browChakra") { 
        document.getElementById("browChakraInfo").style.display = "block"; 
        document.getElementById("defaultText").style.display = "none"; 
        document.getElementById("baseChakraInfo").style.display = "none"; 
        document.getElementById("sacralChakraInfo").style.display = "none"; 
        document.getElementById("solarPlexusChakraInfo").style.display = "none"; 
        document.getElementById("heartChakraInfo").style.display = "none"; 
        document.getElementById("throatChakraInfo").style.display = "none"; 
        document.getElementById("crownChakraInfo").style.display = "none"; 
       } 
      } 

      function showCrownChakra(text) { 
       if(text.id == "crownChakra") { 
        document.getElementById("crownChakraInfo").style.display = "block"; 
        document.getElementById("defaultText").style.display = "none"; 
        document.getElementById("baseChakraInfo").style.display = "none"; 
        document.getElementById("sacralChakraInfo").style.display = "none"; 
        document.getElementById("solarPlexusChakraInfo").style.display = "none"; 
        document.getElementById("heartChakraInfo").style.display = "none"; 
        document.getElementById("throatChakraInfo").style.display = "none"; 
        document.getElementById("browChakraInfo").style.display = "none"; 
       } 
      } 
     </script>

來源

2016-02-21 user3847213

給元素賦予相同的類.U唱課你可以選擇所有元素並立即隱藏。然後使所需的元素可見。 – Avi

您可以創建這樣一個功能 - 給所有元素的共享類 - 讓我們說查克拉 - 環它們：

function change(text) { 
 
    [].forEach.call(document.getElementsByClassName('chakras'), function(val) { 
 
     val.style.display = val.id == text.id + 'Info' ? 'block' : 'none'; 
 
    }); 
 
} 
 

 
change({id: 'baseChakra'}); // just to demo, call the function like before

<div class="chakras" id="baseChakraInfo">a</div> 
 
<div class="chakras" id="defaultText">b</div> 
 
<div class="chakras" id="sacralChakraInfo">c</div> 
 
<div class="chakras" id="solarPlexusChakraInfo">d</div> 
 
<div class="chakras" id="heartChakraInfo">e</div> 
 
<div class="chakras" id="throatChakraInfo">f</div> 
 
<div class="chakras" id="browChakraInfo">g</div> 
 
<div class="chakras" id="crownChakraInfo">h</div>

來源

2016-02-21 04:07:04 baao

爲什麼不只是'[] .forEach.call（document.getElementsByClassName（'chakras'），function ...）'？ –

我習慣了[] .slice.call（），因爲根據jsperf它更快（https://jsperf.com/oneanother），但很多人問我，現在我改變了它:) @Derek朕會功夫 – baao

非常有趣的是，它首先將其轉換爲數組稍微快一點。 –

-1

function show(list, show) { 
    for(var key in list){ 
     document.getElementById(key).style.display= "none"; 
    } 
    document.getElementById(show).style.display= "block"; 
}

你可能嘗試類似上面的功能

來源

2016-02-21 04:08:09 Mox

如何簡化我的javascript代碼，看起來太長而且凌亂？

回答

相關問題