Ir ao conteúdo
  • Cadastre-se

Mudando dor com jquery


Posts recomendados

Oi sou novo no forum 

eu estou começando à aprender Jquery hoje por conta própria :P

to com um probleminha aqui

Gostaria de, ao clicar no botão, ele mudasse de cor ou mudasse a cor da pagina.

Eu criei um alerta para me retornar uma resposta ao clicar no botão (pra ve se ta tudo nos conformes :p)

O alerta retorna normalmente mas o botão não muda de cor ainda.

Sem mais delongas ai vai o código: 

Ai é  HTML

<html>
<head>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="jquery.js"> </script>
</head>
<body>
	<input type="button" id="teste" value="teste" />
</body>
</html>

Aqui o JS

(function($) {
	$(document).ready(function(){
		$("#teste").click(function(){
			$("#teste").css('background-color:','blue');
			alert( "DEU CERTO" );
		});
	});
})(jQuery);	

 

  • Curtir 1
Link para o comentário
Compartilhar em outros sites

  • Moderador

@lc1337 Olá,  seja bem  vindo em nosso Fórum do Clube do Hardware.

O problema do seu código é bem simples e são duas coisas.

 

1) sintaxe errada do inicio

2) sintaxe errada da função  css().

 

Corrigindo 

1) Sintaxe do jquery está errada porque você chamou duas vezes o jquery.

 

O correto é:

$(document).ready(function(){
	//resto do código aqui
});

Já a sintaxe do css()  pode ser duas: 

com o separador  " : " (dois pontos) e chaves delimitadoras OU sem o separador dois pontos e acrescentar uma virgula.

Então faça desta forma:

$("#teste").css('background-color','blue');

OU assim:

$("#teste").css({'background-color':'blue'});

Particularmente prefiro a segunda.. pois permite mais de um atributo separando por virgulas por exemplo:

$("#teste").css({'background-color':'blue', 'color':'#fff'});

Então seu código completo e funcionando ficaria assim:

$(document).ready(function(){
		$("#teste").click(function(){
		   $("#teste").css({"background-color":"blue"});
		});
	});

Você poderia até mesmo referenciar o próprio elemento como trata-se de um botão e quer que aplique nele mesmo poderia ser escrito usando o psudo elemento  $(this)  desta forma:

 

$(document).ready(function(){
		$("#teste").click(function(){
			  $(this).css({"background-color":"blue"});
			
		});
	});

 

  • Curtir 3
Link para o comentário
Compartilhar em outros sites

Visitante
Este tópico está impedido de receber novas respostas.

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...