1

Eu tenho o seguinte:

<figure class="itemImage">
  <span title="Camiseta preta O Poderoso Chefão" style="background:url('img');background-size:cover;background-position:center;"></span>
  <div class="price">
    50,00R$
  </div>
 <div class="postButtons">
   <span>icone compra</span>
   <span class="moreinfobtn">icone info</span>
 </div>
 <div class="moreInfo">
   <p>Tamanhos: P M G GG</p>
   <p>Tecido assim e assado</p>
 </div>
</figure>

<figure class="itemImage">
  <span title="Camiseta preta O Poderoso Chefão" style="background:url('img');background-size:cover;background-position:center;"></span>
  <div class="price">
    50,00R$
  </div>
 <div class="postButtons">
   <span>icone compra</span>
   <span class="moreinfobtn">icone info</span>
 </div>
 <div class="moreInfo">
   <p>Tamanhos: P M G GG</p>
   <p>Tecido assim e assado</p>
 </div>
</figure>

<script>
  $(document).ready(function(){
    $( "#postWrap .postButtons .moreinfobtn" ).click(function() {
      $("#postWrap .moreInfo").toggleClass("moreInfoactive");
    });
  });
</script>

Nesse código cada tag figure contém uma div com class "moreInfo", onde eu coloco as informações de cada camiseta. Essa class a princípio é oculta, e aí que entra o pequeno script no final. Ao clicar no botão "moreinfobtn" é adicionado a class "moreInfoactive" à "moreInfo", fazendo exibir as informações de cada camiseta.

Porém quando clico no botão ele adiciona a class em todos as tags que contém a class "moreInfo" no tema, sendo que precisava que ele exibisse apenas da postagem em questão. Causando um efeito como o da imagem abaixo, reparem que mesmo quando cliquei no botão da primeira postagem, ele exibiu as informações de todas. Como posso resolver?

2 Respostas 2

1

Altere seu JS para pegar a tag figure que envolve o botão clicado:

   $(document).ready(function(){
        $( ".moreinfobtn" ).click(function() {
          $(this).closest('figure').find('.moreInfo').toggleClass("moreInfoactive");
        });
      });

Teste abaixo:

  $(document).ready(function(){
    $( ".moreinfobtn" ).click(function() {
      $(this).closest('figure').find('.moreInfo').toggleClass("moreInfoactive");
    });
  });
.moreInfo {
display: none;}

.moreInfo.moreInfoactive {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<figure class="itemImage">
  <span title="Camiseta preta O Poderoso Chefão" style="background:url('img');background-size:cover;background-position:center;"></span>
  <div class="price">
    50,00R$
  </div>
 <div class="postButtons">
   <span>icone compra</span>
   <span class="moreinfobtn">[icone info]</span>
 </div>
 <div class="moreInfo">
   <p>Tamanhos: P M G GG</p>
   <p>Tecido assim e assado</p>
 </div>
</figure>

<figure class="itemImage">
  <span title="Camiseta preta O Poderoso Chefão" style="background:url('img');background-size:cover;background-position:center;"></span>
  <div class="price">
    50,00R$
  </div>
 <div class="postButtons">
   <span>icone compra</span>
   <span class="moreinfobtn">[icone info]</span>
 </div>
 <div class="moreInfo">
   <p>Tamanhos: P M G GG</p>
   <p>Tecido assim e assado</p>
 </div>
</figure>

0

Outra forma de fazer e desse jeito:

$(document).on('click' , '.moreinfobtn' ,  function(){
       $(this).parent().parent().find(".moreInfo").toggleClass("moreInfoactive");
});
1
  • Obrigado pela ajuda
    – Ericki
    Commented 18/06/2019 às 18:25

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 .