jQuery: fadeToggle() mostra/nascondi il testo del collegamento non cambia

Question

Ho un problema con la dissolvenza, funziona quando il div è visibile per iniziare e il link "Mostra QR" diventa "Nascondi QR". Link "Nascondi QR" dovrebbe essere cliccato e div nascosto ma link del testo non cambia a "Visualizza barre"

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

Dobbiamo controllare che sia la visibilità in una funzione di callback - dopo la fadeToggle è finita. Di quanto funzionerà.

ora è possibile utilizzare anche:

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

Answer 2

provare questo

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

Answer 3

modificare questa riga:

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

a:

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

Answer 4

Prova questa:

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