在jQuery中隐藏和取消隐藏按钮

Question

我这里有一个小脚本.当您按下按钮时,文本会隐藏.如果我想将文本更改为文本"unhide"消失时,我该怎么办呢？

我的意思是按钮上的文字变为"unhide".

<div>
   <p>Should I hide this message?</p>
   <button>Click for hide</button>
</div>

<script>
  $(document).ready(function(){
    $('button').click(function() {
      $('p').slideToggle();
    });
  });
</script>

Answer 1

使用条件和三元运算符? :来更改文本,如果文本是Click for hide我们将其更改为Click for unhide否则我们将其更改为Click for hide

现场演示

$(document).ready(function(){
    $('button').click(function() {
        $(this).text($(this).text() ==  "Click for hide" ? "Click for unhide" : "Click for hide");
        $('p').slideToggle();

    });
});

编辑为@Alex指出,如果文本更新并且可能有拼写错误,此解决方案不是很友好.您可以使用可见性p来更改文本.使用 $('p').slideToggle();也将影响p页面上的所有内容.你应该把它与p以前联系起来button.

现场演示

 $('button').click(function () {
      $(this).text($(this).prev().is(":visible") ? "Click for unhide" : "Click for hide");
      $(this).prev().slideToggle();
 });