jQuery：根据表的可见性状态更改按钮的文本

Question

我试图通过使用jQuery来更改表的按钮的文本。问题是，jQuery .is(":visible")似乎没有做到这一点。我究竟做错了什么？我认为.is(":visible")是需要检查一个元素是否可见。

$(function() { 
 
    $("#tabla").hide(); // We start hiding it. 
 
    $("#boton").click(function() { 
 

 
    var tabla = $("#tabla"); 
 

 
    tabla.fadeToggle();// Change the table visibility 
 

 
    // An tell us if it is visible or not 
 
    if (tabla.is(":visible")) { 
 
     alert("It's visible"); // This is always called. 
 
     // TODO Change button text. 
 
    } else { 
 
     alert("It isn't visible"); // This is never called. 
 
     // TODO Change button text. 
 
    } 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<p><button id="boton">Show</button></p> 
 
<table id="tabla" > 
 
    <thead> 
 
    <tr><th id="cabecera">First</th><th>Second</th></tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>Foo</td><td>Boo</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 1

jQuery的.fadeToggle()方法将需要一些时间来执行和并行[寻找在jQuery的承诺]执行。在你的代码中，当调用fadeToggle时，你正在检查表的可见性，所以它没有时间完成。

可能你想在功能完成后检查可见。你将不得不使用一个回调，如果你希望当切换功能完成

$(function() { 
    $("#tabla").hide(); // We start hiding it. 
    $("#boton").click(function() { 
    var tabla = $("#tabla"); 
    tabla.fadeToggle("fast", "linear" , function(){ 
     // This function will be called when the fade function completes 
     // An tell us if it is visible or not 
     if (tabla.is(":visible")) { 
      alert("It's visible"); 
      // TODO Change button text. 
     } else { 
      alert("It isn't visible"); 
      // TODO Change button text. 
     } 
    }); 
    }); 
}); 

可以对逻辑一看后面这个page或video是解释他们推迟和承诺来检查。

Answer 2

使用检查可见：

if (tabla.css('display') != 'none') { 
    alert('is visible'); 
} else { 
    alert('is NOT visible'); 
}