Problema ao mudar background de div dinamica com javascript

[Alexandre_php 0]

Boa tarde pessoal!

 

Estou retomando projetos e estudos antigos após muito tempo sem mexer neles... E como sempre precisando de ajuda ;) ...

Iniciei um projeto onde o mesmo se destina a vender produtos alimenticios... Quero dar bastante interatividade ao visitante quando clicar ou passar o mouse sobre certas áreas do site...

 

Consegui criar um evento onde ao passar o mouse sobre uma determinada área (div) o background de outra área (entenda div) muda... e ao retirar o mouse o background anterior volta... e fiz da seguinte maneira:

<script type="text/javascript">
$(document).ready(function(){
	
	/* ao passar o mouse na div com id="content_tip_menu" executa a função */
	$("#content_tip_menu").mouseover(function(){
		
		/* a função muda o background da div com id="mascot" */	
		$("#mascot").css("background","url(images/pizzaiolo-posicao-b.png)");
		
		     /* ao tirar o mouse da div com id="content_tip_menu" executa a função */
	         $("#content_tip_menu").mouseout(function(){
	     
		            /* a função muda o background da div com id="mascot" */	
		            $("#mascot").css("background","url(images/pizzaiolo-posicao-a.png)");
		 		 
		 });
	
	});
	
});
</script>

O segundo evento "mouseout" não sei se esta correto, pois quero apenas que quando tirar o mouse a área volte ao seu estado anterior... (Não sei se existe uma forma de otimizar isso...).

 

Isso funciona lindamente!!! Com um único problema... :huh:, só funciona em uma única área com o id estipulado...

 

Ainda estou trabalhando neste layout sem mexer com "BD" e essas áreas (divs) serão carregadas no site de acordo com a quantidade de produtos inseridos...

Exemplo... digamos que seu tiver 3 produtos inseridos no site, os 3 produtos serão carregados dinamicamente em uma determinada área... e seriam 3 divs com o mesmo id "#content_tip_menu"...

 

Eu copiei esta div e colei algumas vezes para gerar conteúdo enquanto não começo o PHP para testar, e ao passar o mouse sobre a primeira div "#content_tip_menu" o background da outra "#mascot" muda, quando tiro o mouse o background volta, mas só na primeira div e nas outras não acontece nada! :(! .

 

Vocês sabem o que pode estar errado?

[Alexandre_php 0]

Boa tarde pessoal...

 

Consegui complementar o código fazendo com que ao passar e retirar o mouse sobre a div, altere os conteúdos e retorne novamente de divs diferentes...

<script type="text/javascript">
$(document).ready(function(){
	
	/* ao passar o mouse na div com id="content_tip_menu" executa a função */
	$("#content_tip_menu").mouseover(function(){
		
		/* a função muda o background da div com id="mascot" e o conteudo da div "textballon"*/	
		$("#mascot").css("background","url(images/pizzaiolo-posicao-b.png)");
		$("#textballon").html("<h6>Novo Conteúdo</h6>");
		
		     /* ao tirar o mouse da div com id="content_tip_menu" executa a função */
	         $("#content_tip_menu").mouseout(function(){
	     
		            /* a função retorna o background da div com id="mascot" e o conteudo da div "textballon"*/	
		            $("#mascot").css("background","url(images/pizzaiolo-posicao-a.png)");
					$("#textballon").html("<h6>RETORNA CONTEÚDO ANTIGO</h6>");
		 		 
		 });
	
	});
	
});
</script>

Mas ele ainda continua pegando uma única div... no caso "#content_tip_menu", quando houver mais divs com este mesmo id será que ele não vai funcionar?

[Alexandre_php 0]

Vejam o funcionamento e o problema disso aqui:

https://jsfiddle.net/Alexandre_php/es20hqyo/4/

[angelorubin 142]

O id deve ser único no documento, se precisa repetir algo, utilize class.

[Alexandre_php 0]

Olá Angelo!

 

Obrigado por responder...

Você viu no exemplo em funcionamento que eu postei? Tem como vc me ajudar me mostrando como deve ficar a adição de class? Faz 3 dias que eu to quebrando a cabeça com isso... rsrsrs Valeu!

[Alexandre_php 0]

Boa noite pessoal...

Graças ao comentário do amigo angelorubin, me fez perceber o erro... que na página deve constar um único id para que a função funcione, portanto quando forem carregadas várias divs com o mesmo id na página a função só ira funcionar uma única vez em um único id... Resolvi momentaneamente o problema trocando o "id" por "class" da div que receberá o "hover"... Copiei e colei várias vezes na página para gerar conteúdo e deu certo... cada div que recebe o mouse em cima faz o efeito desejado... porém ainda não cheguei no BD e não sei se isso vai interferir em alguma coisa... como sou leigo no assunto aceito ainda comentários acerca deste assunto mesmo com o tópico "RESOLVIDO".

 

Segue abaixo o link para o efeito funcionando...

 

https://jsfiddle.net/Alexandre_php/yarfcduw/

 

angelorubin, mais uma vez obrigado por ajudar!