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

I have a problem with fade toggle, It works when the div is visible to start with and link "Show QR" change to "Hide QR". Link "Hide QR" should be clicked and div hidden but link of text not change to "Show QR"

我有一个渐变切换的问题，当div以可视的方式开始并链接“Show QR”更改为“Hide QR”时，它就可以工作了。点击“隐藏二维码”链接，隐藏div但文本链接不更改为“显示二维码”

html:

html:

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

javasctipt :

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

4 个解决方案

#1

jsBin demo

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

We have to check it's visibility in a callback function - after the fadeToggle is over. Than it will work.

我们必须检查它在回调函数中的可见性——在fadeToggle结束之后。比它会奏效。

now you can use also:

现在你也可以使用:

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

#2

Try this:

试试这个:

html:

html:

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

javascript:

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

#3

try this

试试这个

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

#4

change this line:

改变这条线:

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

to:

:

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