php - 在调整框大小时更改 div 文本（jQuery）

Question

我目前正在使用 jQuery 动画来调整横幅的大小。有一个 div 按钮可以在单击时执行此操作。我想要做的是让按钮将其文本从“隐藏横幅”更改为“显示横幅”，具体取决于

<div id="banner_animate" class="banner">
    <div id="minimize" class="small_button">hide banner</div>
<script>

$("#minimize").click(function() {

  var new_height = 200;

  if ($("#banner_animate").height() == 200) new_height = 40;
  $("#banner_animate").animate({
    height: new_height + "px"
  }, 500 );

});

  $(function() {
    $( document ).tooltip();
  });

</script>

我对 jQuery 很陌生，所以任何帮助将不胜感激！

Answer 1

in your $("#minimize").click you can use $(this).text():

$("#minimize").click(function() {
    if ($(this).text() == 'hide banner') {
      $("#banner_animate").animate({height: "40px"}, 500);
      $(this).text('show banner');
    } else {
      $("#banner_animate").animate({height: "200px"}, 500);
      $(this).text('hide banner');
    }
});

http://api.jquery.com/text/

Answer 2

尝试这个：

$("#minimize").click(function () {

    var new_height = 200;

    if ($("#banner_animate").height() == 200) new_height = 40;

    $("#banner_animate").animate({
        height: new_height + "px"
    }, 500);

    $(this).text(function (_, oldText) {
        return oldText === 'Hide banner' ? 'Show banner' : 'Hide banner';
    });
});

另外，首先将 HTML 更改为显示横幅，例如：

<div id="minimize" class="small_button">Show banner</div>

小提琴演示

Answer 3

$("#minimize").click(function() {
    if($(this).html()=="hide banner"){
        $(this).html("show");
    }
    else {
         $(this).html("hide banner");
    }
  var new_height = 200;

  if ($("#banner_animate").height() == 200) new_height = 40;
  $("#banner_animate").animate({
    height: new_height + "px"
  }, 500 );

});

  $(function() {
    $( document ).tooltip();
  });

小提琴演示