2

Meu código está assim:

<div class='CamisetaTudo'>
   <img class='Camiseta'>camiseta.jpg</img>
   <p class='Clique'>Clique aqui</p>
   <p class='Descricao'>Descrição aqui</p>
</div>

<div class='CamisetaTudo'>
   <img class='Camiseta'>camiseta.jpg</img>
   <p class='Clique'>Clique aqui</p>
   <p class='Descricao'>Descrição aqui</p>
</div>
$( ".Clique" ).click(function(){
    $(".Descricao").css("width","260px");   
});

$( ".Clique" ).mouseout(function(){
    $(".Descricao").css("width","");    
});

Como no exemplo acima, tanto a primeira div quanto a segunda possuem as mesmas classes. Pode ter dezenas de camisetas e se eu clico em uma .clique é aberta só a primeira. Queria saber algum jeito de que cada uma abriria a descrição de dentro de sua div.

4
  • Poste seu código Ney, ajudaria-nos a lhe ajudar :) Commented 14/01/2016 às 23:46
  • 1
    sim sim percebi isso e estou aprendendo :)
    – Ney
    Commented 14/01/2016 às 23:46
  • Muito bom.. é isso mesmo ;) Para sua pergunta, é só postar o seu html, das camisetas e o javascript que já usou... Commented 14/01/2016 às 23:48
  • Ney, veja é o que você queria.. Commented 15/01/2016 às 0:16

2 Respostas 2

5

Antes de tudo, existe alguns pequenos erros em seu código:

O source da tag <img> é passado pelo parâmetro src, atém porque não se "fecha" essa tag, olhe como deveria ficar:

<img class='Camiseta' src="camiseta.jpg" />

Outra coisa, evite usar acentos gráficos em parâmetros, como o id e a class. Então de "Descrição" passei para "Descricao".

Feito isso, você pode fazer simplesmente assim:

$('.CamisetaTudo .Descricao').hide(); //Esconde todas as descrições
$('.CamisetaTudo .Clique').click(function(){
    $(this).closest('.CamisetaTudo').children('.Descricao').toggle();
});

Usei o método .closest() que captura o elemento antecessor, e o método .children() captura os filhos de algum elementos a partir de um parâmetro.

Usei também o .toggle() que dá um hide/show.

Há vários outros modos, esse ao menos garantirá que os elementos com a class descrição em questão estejam dentro das div.CamisetaTudo.

Exemplo:

$('.CamisetaTudo .Descricao').hide(); //Esconde todas as descrições
$('.CamisetaTudo .Clique').click(function(){
	$(this).closest('.CamisetaTudo').children('.Descricao').toggle();
});
img{
  width: 100px;
}
.CamisetaTudo .Clique{
  font-weight: bold;
  color: darkBlue;
  font-family: sans-serif;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='CamisetaTudo'>
 <img class='Camiseta' src="http://defesa.org/ocart/image/data/Camiseta%20Medidas.png" />
 <p class='Clique'>Clique aqui</p>
 <p class='Descricao'>Descrição aqui</p>
</div>

<div class='CamisetaTudo'>
 <img class='Camiseta' src="http://defesa.org/ocart/image/data/Camiseta%20Medidas.png" />
 <p class='Clique'>Clique aqui</p>
 <p class='Descricao'>Descrição aqui</p>
</div>

Você pode usar efeitos mais "bonitos" como o .toggleSlide(), fiz esse exemplo como disse, clicando nas camisetas, assim retirei o "clique aqui":

$('.CamisetaTudo .Descricao').hide();
$('.CamisetaTudo .Camiseta').click(function(){
	$(this).closest('.CamisetaTudo').children('.Descricao').slideToggle('fast');
});
img{
  width: 100px;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='CamisetaTudo'>
 <img class='Camiseta' src="http://defesa.org/ocart/image/data/Camiseta%20Medidas.png" />
 <p class='Descricao'>Descrição aqui</p>
</div>

<div class='CamisetaTudo'>
 <img class='Camiseta' src="http://defesa.org/ocart/image/data/Camiseta%20Medidas.png" />
 <p class='Descricao'>Descrição aqui</p>
</div>

4
  • 2
    Ja deu certinho, muito Obrigado, muito rapido e bem esclarecedor :)
    – Ney
    Commented 15/01/2016 às 0:21
  • @Ney de nada. :) Commented 15/01/2016 às 0:23
  • 2
    que bela resposta.Parabéns @SamirBraga
    – durtto
    Commented 15/01/2016 às 0:45
  • Obrigado @durtto :) Commented 15/01/2016 às 0:50
3

Embora já tenha sido respondida, gostaria de acrescentar uma solução sem o uso de Javascript. A qual consiste em utilizar um campo do tipo checkbox para criar o efeito de toggle.

Esquecendo um pouco as classes do seu código...

Normalmente, produtos possuem um identificador único. Não sei como é o funcionamento da sua aplicação, mas eu costumo ver isto por aí. Em HTML, quando há uma referência a algo único utiliza-se o atributo id, certo?!

Há uma técnica interessante que faz uso do atributo for de uma tag <label>. Este atributo serve para especificar a qual elemento ele está vinculado por meio de um identificador único (atributo id). Para testar, que tal clicar no texto ao invés da caixinha abaixo?

<label for='toggle'>Clique no texto para (des)marcar a caixa</label>
<input id='toggle' type='checkbox'/>

Legal, mas e daí?!

E daí que você pode usar essa mesma técnica para criar o efeito que precisa vinculando um label à um checkbox que fará o controle de quando mostrar/esconder as informações do produto.

/**
 * Escondendo o input, afinal, não queremos que a "caixinha"
 * seja mostrada para o usuário.
 *
 * E também escondemos o div em que estão as informações
 * da camiseta.
 */

.shirt input,
.shirt .shirt-info {
  display: none 
}

/**
 *
 * Quando o 'checkbox' estiver marcado, pegaremos o próximo
 * elemento com classe `shirt-info' e exiberemos.
 *
 */
.shirt input:checked ~ .shirt-info {
  display: block
}

/**
 *
 * Quando o input não estiver marcado, pegamos o primeiro elemento
 * 'label' precedido (seletor '+') e colocamos um texto no conteúdo
 * após o elemento.
 *
 **/
.shirt input + label::after {
  content: 'Mostrar Informações';
}

/**
 *
 * Quando o input estiver marcado, apenas trocamos o texto do primeiro
 * elemento precedido.
 *
 */
.shirt input:checked + label::after { 
  content: 'Esconder Informações'
}


/**
 * As regras abaixo servem somente para tornar o exemplo mais "apresentável".
 * Não tem importância para o funcionamento do toggle.
 */

img { max-height: 80px }

.shirt { 
  align-items: center;
  border: 1px solid #ccc;
  display: flex;
  margin: 2px;
  justify-content: space-around
}

.shirt label {
  padding: 4px 10px;
  background: #3498db;
  border-bottom: 2px solid #2980b9;
  color: #fff;
  transition: all 200ms ease-in
}

.shirt input:checked + label {
  background: #1abc9c;
  border-bottom-color: #16a085
}
<!-- 
 ! container
 -->
<div class='shirt'>
  
  <!-- 
   ! A imagem do produto
   -->
  <img src='https://i.sstatic.net/ye5eI.png'/>
  
  <!--
   ! Os elementos que fazem o 'controle' do toggle.
   -->
  <input id='nike-vermelha' type='checkbox'/>
  <label for='nike-vermelha'></label>
  
  <!--
   ! As informações do produto
   -->
  <div class='shirt-info'>
    <p>Descrição Nike vermelha</p>
    <h2>R$ 0,99</h2>
  </div>
</div>

<div class='shirt'>
  <img src='https://i.sstatic.net/6ZOzb.png'/>
  <input id='nike-verde' type='checkbox'/>
  <label for='nike-verde'></label>
  <div class='shirt-info'>
    <p>Descrição Nike verde</p>
    <h2>R$ 4,00</h2>
  </div>
</div>

<div class='shirt'>
  <img src='https://i.sstatic.net/cUTTc.png'/>
  <input id='nike-azul' type='checkbox'/>
  <label for='nike-azul'></label>
  <div class='shirt-info'>
    <p>Descrição Nike azul</p>
    <h2>R$ 1,00</h2>
  </div>
</div>

Referências:

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .