1

我想根据其跟随的div元素动态更新锚元素的文本。首先我尝试过它对我不起作用，如我所料，jsfiddle为此。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

在你的代码.slideToggle('slow')没有完成并且下面的代码之前执行过。

和

if($("div#info").is(":visible")){
      $(this).text('Hide');  //$(this) here refers to div with id info not a tag
   }

这样你的代码就可以工作了

演示

$(document).ready(function () {    
    $(document).on('click', 'a#toggle_info', function () {
        var that = $(this);
        if ($("div#info").is(":visible")) {
            that.text('Show');
        } else {
            that.text('Hide');
        }
        $("div#info").slideToggle('slow');
    });
});
于 2013-09-14T10:26:52.647 回答
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 回答
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 回答