jQuery：fadeToggle（）显示/隐藏链接文本不变

Question

我在淡入淡出切换时出现问题，当div开始显示时可以正常工作并链接＆＃34;显示QR＆＃34;更改为＆＃34;隐藏QR＆＃34;。 链接＆＃34;隐藏QR＆＃34;应单击并隐藏div，但文本链接不会更改为＆＃34;显示QR＆＃34;

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

试试这个：

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

Answer 3

试试这个

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

Answer 4

更改此行：

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

为：

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