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

在您的$("#minimize").click中，您可以使用$(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>

FIDDLE DEMO

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

Fiddle Demo

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

3 个答案: