jQuery: fadeToggle() zeigen/verbergen Text der Verbindung nicht ändern

Question

Ich habe ein Problem mit Fade toggle, Es funktioniert, wenn das div sichtbar ist mit zu beginnen und Link "QR anzeigen" ändern zu "Hide QR". Link zu "Hide QR" sollte angeklickt werden und Div versteckt, aber Link Text nicht zu "Show QR" ändern

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

Wir haben es Sichtbarkeit in einer Callback-Funktion überprüfen - nach dem fadeToggle vorbei ist. Dann wird es funktionieren.

jetzt können Sie auch:

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

Answer 2

versuchen, diese

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

Answer 3

ändern Sie diese Zeile:

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

zu:

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

Answer 4

Versuchen Sie folgendes:

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