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?