Question

我想根据其后面的 div 元素动态更新锚元素的文本。首先我尝试使用is()它对我不起作用我期待，jsfiddle为此。

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

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

无论如何，我找到了jsfiddle所示的替代方案。但我想知道我的第一种方法无效的原因。

Answer 1

您正在使用slideToggle，因此您的dom需要等待动画完成。

你可以做的是将代码包装在回调函数中。

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

Answer 2

来自:visible documentation：

在隐藏元素的动画期间，该元素在动画结束前被视为可见。在显示元素的动画期间，该元素在动画开始时被视为可见。

由于在进行检查时元素是动画的，因此它始终被视为可见。要解决此问题，您必须先检查之前的或之后的。

Answer 3

在您的代码中.slideToggle('slow')未完成，以下代码执行。

和

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

这样你的代码就可以了

DEMO

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

Answer 4

当您使用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

Answer 5

您可以尝试这样的事情，

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

Demo

你也可以使用这样的东西，

$this.html(function (i, html) {
    return html === 'Show' ? 'Hide' : 'Show';
});

jQuery：if（）不适用于动态事件？

5 个答案: