Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Erico Lima

Efeito Jquery - Ocultar e Exibir

Por , em Javascript

Recommended Posts

Erico Lima    0

Erico Lima
Postado

Minha duvida é com relação ao efeito Jquery, quando uso o mesmo código duas vezes na mesma página, apenas o primeiro funciona e eu queria criar uma galeria de imagens em tabela com a função ocultar e exibir. O que acontece é que apenas o primeiro código funciona, já tentei outros códigos até mesmo com css, e o problema continuou, queria saber como aplicar esse efeito várias vezes na mesma página. Em baixo deixei um exemplo de como quero fazer, se acharem algum problema me respondam , agradeceria muito, já que sou apenas iniciante na área de programação web!

 

<html>
<head>
<title>Efeitos com jQuery</title>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#capaefectos").hide();
$("#ocultar").click(function(event){
  event.preventDefault();
  $("#capaefectos").toggle("slow");
});
});
</script>

</head>
<body>
<div id="capaefectos">
<table width="200" border="1">
 <tr>
   <th scope="row"> </th>
   <td> </td>
   <td> </td>
 </tr>
</table>
</div>
<p><a href="#" id="ocultar">Ocultar a camada</a><br />
</p>

<div id="capaefectos">
<table width="200" border="1">
 <tr>
   <th scope="row"> </th>
   <td> </td>
   <td> </td>
 </tr>
</table>
</div>
<p><a href="#" id="ocultar">Ocultar a camada</a><br />
</p>
</body>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Spyder.RV    0

Spyder.RV
Postado

O ID é único, e no seu exemplo existem vários elementos com o mesmo id.

 

Tenta usar classes em vez de IDs nesse caso... e como os blocos são parecidos (se não identicos) eu faria assim:

 

 

<html>
 <head>
<meta charset="UTF-8">
<title>Efeitos com jQuery</title>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
 </head>

 <body>
<div class="capaefectos">
 	<h1>Primeiro DIV</h1>
 	<table width="200" border="1">
   	<tr>
     	<th scope="row"> </th>
       	<td> </td>
       	<td> </td>
   	</tr>
 	</table>
 </div>
 <p><a href="#">Exibir a camada</a><br /></p>

 <div class="capaefectos">
<h1>Segundo DIV</h1>
<table width="200" border="1">
 	<tr>
   	<th scope="row"> </th>
   	<td> </td>
   	<td> </td>
   	</tr>
</table>
 </div>

 <p><a href="#">Exibir a camada</a><br /></p>

 </body>

 <script>
$(document).ready(function(){

 	$(".capaefectos").hide();

 	$("a").click(function(event){

   	event.preventDefault();

   	var div = $(this).parent().prev('div'); // ( 1 )

   	if( div.is(':hidden') ) // ( 2 )
     	$(this).text( "Ocultar a camada" );
   	else
     	$(this).text( "Exibir a camada" );


   	$(div).toggle('slow');
 	});
 });
 </script>

</html>

 

Observe que o seletor $(this) é a peça-chave aqui, visto que pode ter vários links sem ID e mesmo assim ao clicar nele, dentro do evento click esse $(this) irá referenciar exatemente o link que foi clicado. E apartir dele consegue-se chegar ao elemento exato que precisa ser exibido/ocultado.

 

( 1 ): $(this) é o link que foi clicado, $(this).parent() é o parágrafo onde o link está, $(this).parent().prev('div') é o primeiro div acima do link.. assim você consegue usar o próprio jquery para navegar nos elementos até chegar no elemento que precisa... Cuidado... só faça assim se a sua estrutura for sempre em blocos identicos

 

( 2 ): Alternância dos rótulos dos links

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito