javascript - JQuery - 显示/隐藏带有 1 个按钮的 2 个 div 并更改按钮的值

Question

我试图做到这一点，以便当我单击按钮时，它将隐藏一个 div 并显示另一个 div，但同时更改按钮的值以反射(reflect) div 的不同内容。

我已经能够创建这两个函数，但是当我将它们放在一起时，它似乎崩溃了。

这是显示/隐藏功能

Javascript:

function change() {
     if (document.getElementById('tabs')) {
        if (document.getElementById('tabs').style.display == 'none') {
        document.getElementById('tabs').style.display = 'block';
        document.getElementById('parkList').style.display = 'none';}
        else {
        document.getElementById('tabs').style.display = 'none';
        document.getElementById('parkList').style.display = 'block';}
       }
     }

这是值更改函数

Javascript:

function change( el ) {
  if ( el.value === "div1" )
      el.value = "div2";
  else
      el.value = "div1";
 }

这是两者的 HTML

HTML:

<div id="tabs">Div 1</div>
<div id="parkList">Div 2</div>

<input type="submit" value="div1" onclick="return change(this);"/>

我是个新手，所以任何帮助都会很棒。

Answer 1

您可以尝试使用 JQuery toogle()函数切换匹配元素的显示属性。

• 默认情况下 parkList div 是隐藏的。
• 在提交按钮上添加点击监听器。
• 单击提交按钮时切换两个 div 的显示属性
• 通过可见div的内容设置提交按钮的值。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="tabs">Div 1</div>
<div id="parkList" style="display:none">Div 2</div>

<input type="submit" value="Div 1"/>

<script>
  
  var submit = $('input[type="submit"]');
  var tabs = $('#tabs');
  var parkList = $('#parkList');
  
  submit.click(function(e){
     tabs.toggle();
     parkList.toggle();
    
     if(tabs.css('display') == 'none'){
       submit.val(parkList.text());
     }else{
       submit.val(tabs.text());
     }
  });
  
</script>