JQuery: Alterando o texto e o atributo title de um button

Um exemplo bem fácil para alterar o texto de um botão e o seu atributo “title”.

Foram definidos 2 botões:
– primeiro botão: id #btn-salvar
– segundo botão: id #btn-cancelar

As alterações são efetuadas utilizando o evento click() dos botões e são manipulados pelos métodos hide(), text() e attr().

Mais informações são encontradas em comentários dentro do código.

Não se esqueça de baixar e fazer a chamada da biblioteca JQuery.

<html>
<head>
<title>Alterando dados</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('button#btn-salvar').click(function(){		
		// o botão é ocultado
		$('button#btn-salvar').hide();
		// o texto do botão é alterado e o atributo title
		$('button#btn-cancelar').text("Fechar").attr({
			title:"Fechar"
		});
	});
 
	$('button#btn-cancelar').click(function(){
		// o botão é exibido		
		$('button#btn-salvar').show();
		// retorna os valores corretos do botão
		$('button#btn-cancelar').text("Cancelar").attr({
			title:"Cancelar"
		});
	});
});	
</script>	
</head>
<body>
	<button type="button" id="btn-salvar" title="Salvar">Salvar</button>&nbsp;
	<button type="button" id="btn-cancelar" title="Cancelar">Cancelar</button>
</body>
</html>

2 comentários em “JQuery: Alterando o texto e o atributo title de um button

  • 23 de julho de 2010 em 12:41
    Permalink

    Testei aqui ok. Muito bom este exemplo e da forma didatica que estão sendo feito fica melhor ai, continuei assim e boa sorte.

    Resposta
  • 29 de março de 2018 em 21:00
    Permalink

    Muito obrigado! Não era exatamente o que eu queria fazer, mas deu pra tirar uma ideia e resolvi meu problema 😀

    Resposta

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *