Publicado em 15 de abr.

Função só é executada no primeiro elemento da lista

Olá a todos,

Tenho uma lista em que cada elemento tem a seguinte estrutura:

<div class='exibeItem' id='x'>
<p class='tooltip' id='full'>Valor Full:XX,XX</p>
<p class='hide tooltip' id='semi-full' >Valor Semi-Full:XX,XX</p>
<a href='#full' class='itensNivel' id='full'>Itens Full</a>
<a href='#semi-full' class='itensNivel' id='semi-full'>Itens Semi-Full</a>
</div>
 

O que eu quero fazer é ao clicar em Itens Full ou Itens Semi-full eu mude a classe dos elementos **<p>** trocando a classe 'hide' de posição.

Mas eu preciso que isso funcione apenas na div com id='x' e as outras mantenham o valor original

O código escrito abaixo faz isso, porém faz apenas na primeira div, não funcionando para as seguintes.

 $('.exibeItem > a').click(function(e){
 e.preventDefault();
 thisId = $(this).parents().attr('id');
 nivel = $(this).attr('href');

 if(nivel == "#full"){
 $("#"+thisId+" p#full").removeClass('hide');
 $("#"+thisId+" p#semi-full").addClass('hide');

 }
 if(nivel == "#semi-full"){
 $("#"+thisId+" p#semi-full").removeClass('hide');
 $("#"+thisId+" p#full").addClass('hide');
 }
 return false;
 });

Alguma idéia para que funcione em várias divs?

Discussão (4)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

hinom· 15 de abr.

id -> identificação

O atributo id deve ser único para cada objeto

Após consertar isso vc conseguirá fazer o que pretende.

Mulambo· 15 de abr.

@hinom

Obrigado,

Mas eu cada div exibeItem tem seu id próprio, que é em numero. id1,id2,id3,etc..

hinom· 15 de abr.

então, o que é isso ?

<div class='exibeItem' id='x'>
<p class='tooltip' **id='full'**>Valor Full:XX,XX</p>
<p class='hide tooltip' **id='semi-full'** >Valor Semi-Full:XX,XX</p>
<a href='#full' class='itensNivel' **id='full'**>Itens Full</a>
<a href='#semi-full' class='itensNivel' **id='semi-full'**>Itens Semi-Full</a>
</div>

Mulambo· 16 de abr.

@Hinom, po cara valeu mesmo, eu estava tão cansado que deixei passar algo bobo!

<div class='exibeItem' id='x'>
<p class='tooltip' id='fullx'>Valor Full:XX,XX</p>
<p class='hide tooltip' id='semi-fullx' >Valor Semi-Full:XX,XX</p>
<a href='#full' class='itensNivel' id='full'>Itens Full</a>
<a href='#semi-full' class='itensNivel' id='semi-full'>Itens Semi-Full</a>
 

 

 $('.exibeItem > a').click(function(e){
 e.preventDefault();
 thisId = $(this).parents().attr('id');
 nivel = $(this).attr('href');

 if(nivel == "#full"){
 $("#"+thisId+" p#full"+thisId).removeClass('hide');
 $("#"+thisId+" p#semi-full"+thisId).addClass('hide');

 }
 if(nivel == "#semi-full"){
 $("#"+thisId+" p#semi-full"+thisId).removeClass('hide');
 $("#"+thisId+" p#full"+thisId).addClass('hide');
 }
 return false;
 });