jQuery：fadeToggle（）顯示/隱藏鏈接的文本沒有變化

Question

我有一個淡入淡出的問題，它起作用時div可見，並將「顯示QR」更改爲「隱藏QR」。 鏈接 「隱藏QR」 應被點擊和DIV隱藏，但文本的鏈接不會改變 「顯示QR」

HTML：

<a class="emotTab" id="qrshow" href="javascript:void(0);">Show QR</a> 
<div id="div_showqr">Content.....</div> 

javasctipt：

$("#qrshow").click(function(){ 
$("#div_showqr").fadeToggle('slow'); 
    $('#qrshow').text($('#div_showqr').is(':visible')? 'Hide QR' : 'Show QR'); 
$('#qrshow').text($('#div_showqr').is('display:none')? 'Show QR' : 'Hide QR'); 
}); 

Answer 1

jsBin demo

$("#qrshow").click(function(){ 
    $("#div_showqr").fadeToggle(function(){ 
    $('#qrshow').text($(this).is(':hidden')? 'Show QR' : 'Hide QR'); 
    }); 
}); 

我們必須檢查它在回調函數的可見性 - 後fadeToggle結束。它會起作用。

現在你也可以使用：

$('#qrshow').text($(this).is(':visible')? 'Hide QR' : 'Show QR'); 

Answer 2

試試這個

$('#qrshow').text($('#div_showqr').is(':hidden')? 'Show QR' : 'Hide QR'); 

Answer 3

更改此行：

$('#qrshow').text($('#div_showqr').is('display:none')? 'Show QR' : 'Hide QR'); 

到：

$('#qrshow').text($('#div_showqr').is(':hidden')? 'Show QR' : 'Hide QR'); 

Answer 4

試試這個：

HTML：

<div id="qrshow" class="emotTab">Show Qr</div> 
<div id="div_showqr">Content.....</div> 

的javascript：

$(document).ready(function() { 
$('#qrshow').click(function(){ 
text = $(this).text(); 

$('#div_showqr').fadeToggle('slow'); 

if(text =='Show QR'){ 
    $(this).text('Hide QR'); 
} else { 
    $(this).text('Show QR'); 
} 
}); 
});