将功能组合到一个按钮

Question

我想有一个单独的按钮，上面写着“ Viewer One”，并与ID为“ viewer_one”的部分绑定在一起。 当用户单击该按钮时，我希望将其更改为显示“ Viewer Two”，并且还显示ID为“ viewer_two”的部分来代替其他导航。 每次单击该按钮时，都会切换到另一个按钮。

我有两组分别执行每个功能的脚本，但是我无法弄清楚如何使它们同时工作。 此刻，我可以拥有一个按钮，该按钮可以在单击时更改其值，但不影响其余代码，或者可以使该按钮影响其余的代码，但其自身的文本不变。

我在下面包含了我的代码-我同时包含了两组JavaScript，以便您可以看到自己拥有的内容，但它们只有在包含一个或另一个时才起作用-我需要帮助弄清楚如何使它们一起工作。

以下是相关部分代码的精简版本-主代码为每个查看者提供了更多列表项。

 <!-- this gets the button click to change which list is visible--> function switchVisible() { if (document.getElementById('viewer_one')) { if (document.getElementById('viewer_one').style.display == 'none') { document.getElementById('viewer_one').style.display = 'block'; document.getElementById('viewer_two').style.display = 'none'; } else { document.getElementById('viewer_one').style.display = 'none'; document.getElementById('viewer_two').style.display = 'block'; } } } <!--This gets the button text to change--> function myFunction() { var x = document.getElementById("Button1"); if (x.innerHTML === "Viewer Two") { x.innerHTML = "Viewer One"; } else { x.innerHTML = "Viewer Two"; } } 

  <section id="second_nav"> <input id="Button1" type="button" value="Viewer One" onclick="switchVisible();"/> <button id="Button1" onclick="myFunction()">Viewer One</button> <nav class="viewer_nav" id="viewer_one"> <ul> <li style="color: blue;"><b>VIEWER ONE:</b></li> <li><a href="#client1">Client Info</a></li> <li><a href="#scripts1">Scripts</a></li> </ul> </nav> <nav class="viewer_nav" id="viewer_two"> <ul> <li style="color: blue;"><b>VIEWER TWO:</b></li> <li><a href="#client2">Client Info</a></li> <li><a href="#scripts2">Scripts</a></li> </ul> </nav> </section> <div id="content_area"> <section class="viewer_class" id="view_area_one"> <h3 class="viewer_title" style="text-align: center;">VIEWER ONE</h3> <span id="client1"></span> <h4>Client Info</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <span id="scripts1"></span> <h4>Scripts</h4> <p>Et odio pellentesque diam volutpat. Vulputate eu scelerisque felis imperdiet proin. Turpis in eu mi bibendum neque.</p> </section> <section class="viewer_class" id="view_area_two"> <h3 class="viewer_title" style="text-align: center;">VIEWER TWO</h3> <span id="client2"></span> <h4>Client Info</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <span id="scripts2"></span> <h4>Scripts</h4> <p>Et odio pellentesque diam volutpat. Vulputate eu scelerisque felis imperdiet proin. Turpis in eu mi bibendum neque.</p> </section> 

没有错误消息，但我只能使其中一个工作，而不能组合使用。

在此先感谢您的帮助。

Answer 1

 var currentViewer = 1 updatePage(currentViewer) function switchViewer() { if (currentViewer === 1) { currentViewer = 2 } else if (currentViewer === 2) { currentViewer = 1 } updatePage(currentViewer) } function updatePage(viewer) { switch(viewer) { case 1: document.getElementById('viewer_one').style.display = 'block'; document.getElementById('viewer_two').style.display = 'none'; document.getElementById('view_area_one').style.display = 'block'; document.getElementById('view_area_two').style.display = 'none'; document.getElementById('switchViewerButton').innerHTML = "Viewer 2" break; case 2: document.getElementById('viewer_one').style.display = 'none'; document.getElementById('viewer_two').style.display = 'block'; document.getElementById('view_area_one').style.display = 'none'; document.getElementById('view_area_two').style.display = 'block'; document.getElementById('switchViewerButton').innerHTML = "Viewer 1" break; } } 

 <section id="second_nav"> <button id="switchViewerButton" onclick="switchViewer()">Viewer One</button> <nav class="viewer_nav" id="viewer_one"> <ul> <li style="color: blue;"><b>VIEWER ONE:</b></li> <li><a href="#client1">Client Info</a></li> <li><a href="#scripts1">Scripts</a></li> </ul> </nav> <nav class="viewer_nav" id="viewer_two"> <ul> <li style="color: blue;"><b>VIEWER TWO:</b></li> <li><a href="#client2">Client Info</a></li> <li><a href="#scripts2">Scripts</a></li> </ul> </nav> </section> <div id="content_area"> <section class="viewer_class" id="view_area_one"> <h3 class="viewer_title" style="text-align: center;">VIEWER ONE</h3> <span id="client1"></span> <h4>Client Info (view_area_one)</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <span id="scripts1"></span> <h4>Scripts</h4> <p>Et odio pellentesque diam volutpat. Vulputate eu scelerisque felis imperdiet proin. Turpis in eu mi bibendum neque.</p> </section> <section class="viewer_class" id="view_area_two"> <h3 class="viewer_title" style="text-align: center;">VIEWER TWO</h3> <span id="client2"></span> <h4>Client Info (view_area_two)</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Some other text...</p> <span id="scripts2"></span> <h4>Scripts From V2</h4> <p>Et odio pellentesque diam volutpat. Vulputate eu scelerisque felis imperdiet proin. Turpis in eu mi bibendum neque.</p> </section> 

这是我的版本-我从更改DOM的代码中分离出了用于控制当前哪个查看器可见的逻辑，因此您可以更直接地查看当前查看器如何更改页面内容。 我也不太了解您想要在按钮上更改什么，我已经将其设置为内容切换，因为这似乎就是您想要的？ 您的示例仅切换导航栏。 让我知道这对您的适合程度。

Answer 2

因此，如果您想两者一起工作，请将您的javascript代码编写为：

<!--  this gets the button click to change which list is visible-->

 function switchVisible() {

<!-- Your Code -->

}

<!--This gets the button text to change-->

 function myFunction() {

<!-- Your Code -->

}

<!-- My Code -->

window.onload = function(){
  const button = document.querySelector("#switchViewerButton");
  if (button) {
     button.onclick = function(event){
        event.preventDefault();
        switchVisible();
        myFunction();
     }
  }

}

并替换HTML行

<button id="switchViewerButton" onclick="switchViewer()">Viewer One</button>

与线

<button id="switchViewerButton">Viewer One</button>

我希望它能工作。 如果您在实施解决方案时遇到任何问题，请发表评论。