[Resolvido] Aplicar JQuery em um resultado de busca

[_Leandro 0]

Pessoal boa noite,

 

Vai parecer que eu deveria estar no tópico de PHP mas a questão central é JavaScript, especificamente a biblioteca JQuery.

 

É o seguinte:

 

Quando acessar a página principal, tudo que estiver no meu banco de dados vai aparecer lá em pequenos quadros feitos com divs. Isso foi feito com o seguinte código:

 

 

<?php
include("conexao.php");

$per_page = 25;
$sqlc = "select * from acao";
$rsdc = mysql_query($sqlc);
$cols = mysql_num_rows($rsdc);
$page = $_REQUEST['page'];

$start = ($page-1)*25;
$sql = "select * from acao ORDER BY codigo_jogo DESC limit $start,25";
$rsd = mysql_query($sql);
?>
<?php
while($resultado=mysql_fetch_array($rsd))
{
print "

<div id=jogo>
<img src=$resultado[link_imagem] align=left></img>
<a id=box></a>
</div>


";
}?>

 

 

Esse código é um arquivo externo à página principal, um outro código que não vem ao caso é que chama o resultado da busca para a página principal.

Após eu ter os resultados retornados, queria que ao passar o mouse sobre os quadros, um efeito hover fosse aplicado em cada quadro, o hover seria um fadeIn e fadeOut. o problema é que como os quadros são gerados dinamicamente, todos tem o mesmo nome na id da div e portanto quando eu passo o mouse em um quadro, todos os quadros são afetados de uma vez já que todos tem o mesmo nome.

 

O código JQuery é o seguinte:

 

 

<script type="text/javascript">
$(function(){
$('#quadro').hover(
function(){$('#jogo a').fadeIn(200);},
function(){$('#jogo a').fadeOut(200);}
);
});

</script>

 

O id #quadro é o quadro que envolve os pequenos quadros gerados dinamicamente, estes pequenos quadros chamam-se #jogo.

 

 

Espero ter sido claro, tomara q alguém saiba.

 

Aguardo respostas e obrigado pessoal.

[William Bruno 1501]

Troque os IDs por CLASSES

 

pois você não deve repetir IDs num mesmo documento.

Dai então, basta trabalhar corretamente com o objeto this, veja:

 

http://wbruno.com.br/blog/2011/06/21/afinal-e-javascript/

[_Leandro 0]

kara, deu certo sim foi só usar o this.

 

Porém veja, os pequenos quadros são os resultados da busca e são mostrados dentro de um grande quadro que é uma div class=quadro. Após estes pequenos quadros serem carregados, o efeito hover é aplicado pelo seguinte código:

 

<script type="text/javascript">
$(function (){

$('.quadro').click(function(){
$('.jogo').hover(function(){

var descreve = '<div class="descricao">';
	descreve += '</div>';


	$(this).append(descreve).children('.descricao').hide().slideDown(150);

}, function(){

$('.descricao').remove();


});
});
});
</script>

 

 

veja que a unica forma que eu encontrei de fazer o efeito hover ser aplicado é se eu clicar no quadro grande, já tentei colocar onload mas não dá certo. O que eu poderia modificar?

[William Bruno 1501]

não entendi.

 

onload não tem nada a ver com isso.

tb não faz muito sentido esse hover dentro do click.

 

 

aperte Ctrl+U e coloque a sua marcação HTML aqui.(o trecho referente a duvida)

[_Leandro 0]

Deu certo quando eu simplifiquei o código para apenas isto:

 

$(document).ready(function(){

$(".jogo").mouseover(function ver(){

	$(this).css('margin','0px 5px 0px 5px')
       $(this).stop().animate({height:'144px', top:'-36px'},{queue:false, duration:200})
   });

   $(".jogo").mouseout(function ocultar(){
	$(this).css('margin','0px 5px 0px 5px')
       $(this).stop().animate({height:'72px', top:'0px'},{queue:false, duration:200})
   });});	

 

 

Falow.