1

アンカー要素のテキストを、それに続くdiv要素に基づいて動的に更新したいと考えていis()ます。

$(document).on('click','a#toggle_info',function(){
   $("div#info").slideToggle('slow');

    if($("div#info").is(":visible"))
   {
      $(this).text('Hide');  
   }
   else
   {  
    $(this).text('Show');               
   }       
 });

とにかく、jsfiddleに示されているように、これに代わるものを見つけました。しかし、最初のアプローチが機能しない理由を知りたいです。

4

5 に答える 5

3

SlideToggle を使用しているため、dom はアニメーションが終了するまで待つ必要があります。

できることは、コードをコールバック関数内にラップすることです。

$("div#info").slideToggle('slow',function(){
   if($("div#info").is(":visible"))
   {
      $('#toggle_info').text('Hide');  
   }
   else
   {  
    $('#toggle_info').text('Show');               
   }    
});
于 2013-09-14T10:24:30.457 に答える
2

:visibleドキュメントから：

要素を非表示にするアニメーション中、要素はアニメーションの最後まで表示されていると見なされます。要素を表示するアニメーション中、要素はアニメーションの開始時に表示されていると見なされます。

チェックを行っているときに要素がアニメーション化されるため、常に表示されていると見なされます。これを修正するには、アニメーションの前または後にチェックを行う必要があります。

于 2013-09-14T10:26:42.703 に答える
0

このようなものを試すことができます。

$(document).ready(function(){

    $(document).on('click','a#toggle_info',function() {
        var $this = $(this);
        $("div#info").slideToggle('fast',function () {
            var $that = $(this);
            $this.html(function (i, html) {
                return $that.is(":visible") ? 'Hide' : 'Show';
            });
        });      
     });
});

デモ

このようなものを使用することもできます。

$this.html(function (i, html) {
    return html === 'Show' ? 'Hide' : 'Show';
});
于 2013-09-14T10:34:23.497 に答える
0

slideToggle() を使用しているため、アニメーションが完了するまで待つか、アニメーション コマンドを次のように変更します。

$(document).ready(function(){
    $(document).on('click','a#toggle_info',function(){        
        if($("div#info").is(":visible"))
       {
          $(this).text('Hide');  
       }
       else
       {  
        $(this).text('Show');               
       } 
        $("div#info").slideToggle('slow');
     });
});

DEMO FIDDLE

また

次のように、slideToggle コールバック関数を使用してアンカー テキストを変更できます。

$(document).ready(function(){
    $(document).on('click','a#toggle_info',function(){
        var anchorelm = $(this);
        $("div#info").slideToggle('slow', function(){
        if($("div#info").is(":visible"))
       {
          anchorelm.text('Hide');  
       }
       else
       {  
        anchorelm.text('Show');               
       } 
        });       
     });
});

DEMO FIDDLE

于 2013-09-14T10:27:29.953 に答える