0

現在、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にかなり慣れていないので、どんな助けでも大歓迎です!

4

3 に答える 3

2

あなた$("#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/

于 2013-05-09T10:27:38.157 に答える
1

これを試して：

$("#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>

フィドルのデモ

于 2013-05-09T10:31:19.380 に答える