將兩個相同的javascript合併爲一個

Question

我已經搜索了，但坦率地說，不太瞭解JS，以理解所有其他的「結合這兩個功能」的帖子。

我正在使用腳本滑出聯繫人面板。我複製這個腳本然後滑出關於面板。

我想合併成一個腳本來整理一些東西。可能？

聯繫面板：

<script type="text/javascript">    
    function showContactPanel() { 
    var elem = document.getElementById("contact-panel"); 
    if (elem.classList) { 
     elem.classList.toggle("show"); 
    } else { 
     var classes = elem.className; 
     if (classes.indexOf("show") >= 0) { 
     elem.className = classes.replace("show", ""); 
     } else { 
     elem.className = classes + " show"; 
     } 
     console.log(elem.className); 
    } 
    } 
</script> 

複製給了關於面板：

<script type="text/javascript">   
    function showAboutPanel() { 
    var elem = document.getElementById("about-panel"); 
    if (elem.classList) { 
     elem.classList.toggle("show"); 
    } else { 
     var classes = elem.className; 
     if (classes.indexOf("show") >= 0) { 
     elem.className = classes.replace("show", ""); 
     } else { 
     elem.className = classes + " show"; 
     } 
     console.log(elem.className); 
    } 
    } 
</script> 

Answer 1

你可以通過面板的ID作爲參數：

function showPanel(id) { 
    var elem = document.getElementById(id); 
    if (elem.classList) { 
     elem.classList.toggle("show"); 
    } else { 
     var classes = elem.className; 
     if (classes.indexOf("show") >= 0) { 
      elem.className = classes.replace("show", ""); 
     } else { 
      elem.className = classes + " show"; 
     } 
     console.log(elem.className); 
    } 
} 

，然後調用它的方式：

showPanel("about-panel"); 

或

showPanel("contact-panel"); 

Answer 2

因此改變你的函數簽名承擔元素中的參數問題：

function showPanel(panelId) { 
    var elem = document.getElementById(panelId); 
    ... 

和稱它爲：

showPanel("contact-panel"); 

Answer 3

您可以傳遞的標識面板作爲參數的功能：

<script type="text/javascript">   
    function showPanel(panelId) { 
    var elem = document.getElementById(panelId); 
    if (elem.classList) { 
     elem.classList.toggle("show"); 
    } else { 
     var classes = elem.className; 
     if (classes.indexOf("show") >= 0) { 
     elem.className = classes.replace("show", ""); 
     } else { 
     elem.className = classes + " show"; 
     } 
     console.log(elem.className); 
    } 
    } 
</script> 

有關功能參數的更多信息，請參見JavaScript Function Parameters。