Question

我想点击我的联系表单上的按钮来显示/隐藏。我跟随＆＃34;显示 - 隐藏＆＃34; jquery函数现在有两个按钮，我无法找到如何扩展它，因此它将使用相同的按钮进行显示和隐藏，并反映窗体的可见性及其消息：

首次点击按钮＆＃34;写信给我＆＃34;它显示表单并将按钮的文本更改为＆＃34;我现在不想写任何消息＆＃34;。

再次点击它隐藏表格并返回＆＃34;写我＆＃34;

  <script>
  $(document).ready(function(){
  $("#hide").click(function(){
  $("#par").hide();
  });
  $("#show").click(function(){
  $("#par").show();
  });
  });
  </script>

<button id="hide">Hide</button>
<button id="show">Write me</button>
<div id="par">
<p>
<input type="email" name="email" id="email" placeholder="email" autofocus required>
</p>
<p>
    <input type="text" name="subject" id="name" placeholder="subject" autofocus required>
</p>
<p>
    <input type="text" name="message" id="message" placeholder="message" autofocus required>
</p>
<p>
    <input type="submit" name="send" id="send" value="Send">
</p>
</div>


#par{display:none;}

Answer 1

 $("#hide").toggle(function(){
  $("#par").hide();
  $(this).text("I don't want to write any message now");
  },function(){
$(this).text("Write me");
$("#par").show();
});

参考 toggle

Answer 2

试试这个

$(document).ready(function () {
    $('#hide').on('click', function () {
        if ($('#par').is(':visible')) {
            $(this).text('Write me');
            $('#par').hide();
        } else {
            $(this).text("I don't want to write any message now.");
            $('#par').show();
        }
    });
});

DEMO

Answer 3

$('#btn').click(function(){
  if($(this).text() == "hide")
  {
     $(this).text("show");
     $("#par").hide();
  }
  else
  {
     $(this).text("hide");
     $("#par").show();    
  }    
});

Answer 4

如果我理解正确，那么您正在寻找.text()

删除这两个按钮，并有一个像这样的按钮

<button id="showHide">Show</button>

<强> JS：

$("#showHide").click(function () {
    $("#par").toggle();
    if ($('#par').is(':visible')) {
        $("#showHide").text("Show");
    } else {
        $("#showHide").text("Hide");
    }
});

Answer 5

试试这个： - http://jsfiddle.net/adiioo7/E3YCm/

<强> JS： -

  $(document).ready(function () {
      $("#button").click(function () {
          $("#par").toggle(function () {
              if ($("#button").val() == "Hide") $("#button").val("Show");
              else $("#button").val("Hide");
          });
      });
  });

<强> HTML： -

<div id="par">Show/Hide Text</div>
<input type="button" id="button" value="Hide">

<强> CSS： -

#par {
    display:none;
}

Answer 6

听起来像是在.toggle()之后，

<script>
$(document).ready(function(){
    $("#toggle").click(function(){
        $("#par").toggle();
        $("#toggle").text($("#toggle").text() == 'Hide' ? 'Show' : 'Hide');
    });
});
</script>

<button id="toggle">Show</button>
<div id="par">
<p>
    <input type="email" name="email" id="email" placeholder="email" autofocus required>
</p>
<p>
    <input type="text" name="subject" id="name" placeholder="subject" autofocus required>
</p>
<p>
    <input type="text" name="message" id="message" placeholder="message" autofocus required>
</p>
<p>
    <input type="submit" name="send" id="send" value="Send">
</p>
</div>

<style>
#par{
  display:none;
}
</style>

使用相同的按钮并更改它上面的文本：对于我的show / hide jquery函数

6 个答案:

试试这个： - http://jsfiddle.net/adiioo7/E3YCm/