How do I show a description of a shirt when I click on it?

Question

How do I show a description of a shirt when I click on it?

Navigation

#1 by (5 votes)
#2 by (3 votes)

2

My code looks like this:

<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","");    
});

As in the example above, both the first div and the second have the same classes. It can have dozens of T-shirts and if I click on a .clique it's only the first one open. I wanted to know some way that each one would open the description inside its div .

javascript jquery

asked by anonymous 15.01.2016 / 00:44

2 answers

3

Although it has already been answered, I would like to add a solution without the use of Javascript. This is to use a field of type checkbox to create the effect of toggle .

Forgetting your code classes a little ...

Products typically have a unique identifier. I do not know how your application works, but I usually see it there. In HTML, when there is a reference to something unique, the id attribute is used, right?!

There is an interesting technique that makes use of the for attribute of a tag <label> . This attribute is used to specify which element it is bound by a unique identifier ( id attribute). To test, how about clicking the text instead of the box below?

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

Cool, but so what?!

So you can use this same technique to create the effect you need to link a label to a checkbox that will control when to show / hide product information.

/**
 * 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='http://i.stack.imgur.com/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='http://i.stack.imgur.com/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='http://i.stack.imgur.com/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>

References:

CSS3 Selectors Maujor
<label> - Mozilla

15.01.2016 / 02:17

Why is PUBLIC and xmlns declared using site w3.org? Capture the link of images contained in html

score 5 · Accepted Answer

First of all, there are a few minor bugs in your code:

The source tag of the <img> tag is passed by the parameter src , even if you do not "close" this tag, look how it should look:

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

Otherwise, avoid using graphical accents in parameters such as id and class . Then from "Description" I went to "Description".

Once you've done this, you can simply do this:

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

I used the method .closest() that captures the predecessor element, and the .children() captures the children of some elements from a parameter.

I also used .toggle() which gives hide/show .

There are several other ways, this will at least ensure that the elements with the class description in question are within div.CamisetaTudo .

Example:

$('.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><divclass='CamisetaTudo'><imgclass='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"/><pclass='Clique'>Cliqueaqui</p><pclass='Descricao'>Descriçãoaqui</p></div>

Youcanusemorebeautifuleffectslike.toggleSlide(),ImadethisexampleasIsaid,clickingontheT-shirts,soIremovedthe"click here":

$('.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><divclass='CamisetaTudo'><imgclass='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>