jQuery: fadeToggle() bağlantıyı göster metnini göster/gizle

Question

Yavaş geçişle ilgili bir sorunum var, div görünecek şekilde çalışıyor ve "Show QR" ("QR'yi Gizle") bağlantısını "Show QR" olarak değiştir. Bağlantı "Hide QR" tıklandığında edilmeli ve gizli div ancak metnin bağlantı değil

html göster "QR" olarak değişir:

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

Biz bir geri arama işlevi görünürlük diye kontrol etmek zorunda - fadeToggle bittikten sonra. Bundan daha işe yarayacak.

şimdi de kullanabilirsiniz:

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

Answer 2

bu

deneyin

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

Answer 3

bu satırı değiştir:

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

için:

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

Answer 4

deneyin:

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