javascript - 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>

javascript :

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