Ir para conteúdo

Arquivado

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

Ismaeldm

[Resolvido] Conflito de elementos com JQuery

Por , em Javascript

Recommended Posts

Ismaeldm    5

Ismaeldm
Postado

assim gente, ja estou com um problema a um bom tempo em questão de JQuery...

irei passar um simples código abaixo...

<script>
$(document).ready(function() {				   
 $("div #div").click(function(){
 $("div a").show();
 });
});
</script>
<body>
 <div>
   <div id="div">Clique</div>
   <a>Exibe este link</a>
 </div>
</body>

muitas vezes usamos códigos assim para exibir determinada coisa, entretanto temos um problema chato, digamos que tenhamos duas coisas iguais, por exemplo...

<div>
 <div id="div">Clique</div>
 <a>Exibe este link</a>
</div>
<div>
 <div id="div">Clique2</div>
 <a>Exibe este link2</a>
</div>

nesse caso, iria acontecer que o primeiro funciona, mas o segundo não, até poderiamos criar uma id diferente para cada div pai, mas isso iria ficar uma gambiarra, imagina em um site, iria ter que ficar fazer <div id='1'></div><div id='2'></div><div id='3'></div>...

não tem como solucionar este problema?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

tem sim.

 

nesse caso, você deve utilizar CLASS, e estudar sobre o objeto THIS

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Denilson Telaroli    7

Denilson Telaroli
Postado

use listas <ul>

assim você pode determinar o index clicado e abrir o index equivalete da outra

 

<ul id="getClick">

<li></li>

<li></li>

</ul>

 

<ul id="open">

<li></li>

<li></li>

</ul>

 

$('#getClick li').click(function() {

 

$('#open li').eq($(this).index()).addClass('opened')

 

})

 

isto permite que seja dinâmica a quantidade de ítens.

outra coisa é que você pode usar qualquer tipo de tag, desde que mantenha um padrão para o jQuery conseguir encontrar o index

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ismaeldm    5

Ismaeldm
Postado

Ja consegui resolver tudo que eu precisava :grin:

Eu achava que tanto id como class, o jquery capturava somente o primeiro elemento, mas não é bem assim...

depois, comecei a estudar mais sobre o (this), parent(), find(), no final finalmente criei meu código, irei passar um trecho dele para poder explicar aos que tem a mesma duvida...

 

 $(".postvideo .downloadmenos").click(function(){
   $(this).fadeOut();
   //oculta o conteudo clicado com um fade.
   $(this).prev().fadeIn();
   //exibe o conteudo anterior com um fade.
   $(this).parent().parent().find('.downloadlinks .avi').slideUp(400);
   //irá subir dois elementos, depois capturar o ".avi" dentro do ".downloadlinks" 
   //e irá oculta-lo com slide.
   $(this).parent().parent().find('.downloadlinks .mp4').slideUp(400);
   //semelhante ao anterior.
   $(this).parent().parent().find('.downloadlinks').hide(500);
   //nesse caso, a diferença é que ele trabalha diretamente com o ".downloadlinks", 
   //e não com as classes dentro dele.
   $(this).parent().parent().find('.linkmp4').removeAttr('style');
   //remove o atributo "style" do .linkmp4.
   $(this).parent().parent().find('.linkavi').attr('style', 'background-color: #003dbf;');
   //adiciona o atributo "style" ao .linkavi.
 });

 

Obrigado a todos

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