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

<强> Live Demo

$(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相关联。

<强> Live Demo

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

Answer 2

您可以查看:visible：

DEMO jsFiddle

$(document).ready(function () {
    $('button').click(function () {
        var $self = $(this);
        $(this).closest('div').find('p').slideToggle(function () {
            $self.text($(this).is(':visible') ? "Click for hide" : "unhide");
        });
    });
});

Answer 3

像这样：

$(document).ready(function(){
    $('button').click(function() {
        $('p').slideToggle(function() {
            $('button').text('new text');
        });
    });
});

Answer 4

试试这个：

<div>
    <p style="display:block">Should I hide this message?</p>
    <button>Click for hide</button>
</div>
   $( "button" ).click(function() {
    $( "p" ).toggle(function(){
        $("button").text($(this).is(':visible') ? "Click for hide" : "unhide");
    });
});

http://jsfiddle.net/fbBRV/

更新了代码和jsfiddle。

Answer 5

你应该：

向id

<p>

向id

<button>

利用<p>的可见性来更改文字

您的代码将成为

<div>
   <p id="theMessage">Should I hide this message?</p>
   <button id="theButton">Click for hide</button>
</div>

<script>
  $(document).ready(function(){

    // $('button') would attach it to ALL buttons on page
    // this would attach it only to the correct one
    $('#theButton').click(function() {
      var _this = this;
      var pTag = $('#theMessage');
      pTag.slideToggle(function(){
        // avoiding else block through initialization
        var buttonText = "Click to unhide";
        if(pTag.is(':visible')) {
            buttonText = "Click to hide";
        }
        // note this is '_this' from the .click handler
        _this.text(buttonText);
      });
    });
  });
</script>

注意三元运算符?:，两个方面都会被评估，因此您可能会在代码中遇到模糊的副作用。 if/else让您免于此问题。

Answer 6

解决问题的最佳代码是：

$(document).ready(function(){
    $('button').click(function() {
        $('p').slideToggle(function() {
            $(this).text('new text');
        });
    });
});

非常感谢大家的答案： - ）

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

6 个答案: