Question

我已经搜索过但坦率地说，对JS的了解不足以理解所有其他＆＃34;结合这两个功能＆＃34;已经在那里的帖子。

我正在使用脚本滑出联系人面板。我复制了这个脚本，然后滑出关于面板。

我想将两者整合到一个脚本中以便整理。可能的？

联络小组：

 <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

您可以将面板的id作为参数传递给函数：

<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。

将两个相同的javascripts合二为一

3 个答案: