jquery - 使用相同的按钮并更改其上的文本：对于我的显示/隐藏 jquery 功能

Question

我想在单击按钮时显示/隐藏我的联系表。我现在有以下带有两个按钮的“显示 - 隐藏”jquery 函数，我无法找到如何扩展它，因此它将使用相同的按钮进行显示和隐藏，并通过其消息反映表单的可见性：

• 在第一次单击“写给我”按钮时，它会显示表单并将按钮的文本更改为“我现在不想写任何消息”。

• 在另一次单击时，它会隐藏表单并返回“写给我”

    <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();
});

参考切换

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();
        }
    });
});

演示

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/aidioo7/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>