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