javascript - jQuery:fadeToggle()显示/隐藏链接的文本不变

我在使用淡入淡出切换时遇到问题，当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');
});

最佳答案

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