Problemas alternando texto do link com JQ
Pergunta
Eu tento usar este código para alternar o texto no link:
var showText="<span>Open</span> ↓";
var hideText="<span>Close</span> ↑";
$('h1').before('<a href="javascript:;" id="hc_toggle_close">' + showText + '</a>');
$('#hc_toggle_close').click(function () {
$('#hc_toggle_close:contains("Open")').html(hideText);
$('#hc_toggle_close:contains("Close")').html(showText);
});
Mas ele não funciona! Bem como uma normal, se ... construção de outra pessoa. Poderia alguém por favor me aponte o que está errado aqui. Obrigado!
Solução
Use a função toggle
helper:
var showText="<span>Open</span> ↓";
var hideText="<span>Close</span> ↑";
$('h1').before('<a href="javascript:;" id="hc_toggle_close">' + showText + '</a>');
$('#hc_toggle_close').toggle(
function () {
$('#hc_toggle_close').html(hideText);
},
function () {
$('#hc_toggle_close').html(showText);
}
);
A partir da documentação de toggle
:
Sempre que um elemento correspondente for clicado, a função primeira especificado é disparado, quando clicado novamente, o segundo é disparamos. Todos os cliques subseqüentes continuam Para girar através das duas funções.
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow