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 演示

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