JQuery

Question

我试图做到这一点，当我点击一个按钮时，它会隐藏一个 div 并显示另一个，但同时更改按钮的值以反映 [= 的不同内容42=]s.

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

这是 show/hide 函数

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

问题似乎是2个函数同名。

当您调用 change() 以显示 block/none 元素时，最有可能发生的是您用 change(element)

覆盖

例如将第二个函数名称更改为 changeValue(el) 并且它有效

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

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

Answer 2

您似乎有 2 个同名函数。 function change() 尝试重命名其中之一。

Answer 3

你可以尝试用JQuerytoogle()函数来切换匹配元素的显示属性

默认 parkList div 是隐藏的。
在 submit 按钮上添加点击侦听器。
在点击提交按钮时切换属性两个 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>

Answer 4

您可以为此使用 jquery，请参阅下面的代码以了解单击按钮时的 show/hide div：无需编写两个函数。只需在单击按钮时调用以下函数。

function changeValue(){
   if($(this).text() === 'div1'){
      $(this).text('div2');
      $('div2').hide();
      $('div1').show();
   }else{
      $(this).text('div1');
      $('div1').hide();
      $('div2').show();
   }
}

Answer 5

抱歉，如果我没弄对，你在哪里调用 show/hide 函数 change()？

正在为按钮命名。您需要为样式分配事件侦听器或调用函数，使用 jquery 如下：

$('#tabs').show();
$('#parkList').hide();

并且您需要更改两个函数之一的方法名称'change'。

Answer 6

默认情况下，您可以显示 none 秒 div

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

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

JQuery - Show/hide 2 个 div，带有 1 个按钮并更改按钮的值

JQuery - Show/hide 2 divs with 1 button and change value of button

html

javascript

show-hide