Ho un problema che non sto riuscendo a risolvere tramite Jquery. Ho un dom come questo
<article ID="1">
<div class="placemark-icon" data-attribute="a"></div>
<div class="placemark" data-attribute="a">Some info</div>
<div class="placemark-icon" data-attribute="b"></div>
<div class="placemark" data-attribute="b">Some info</div>
</article>
<article ID="2">
<div class="placemark-icon" data-attribute="c"></div>
<div class="placemark" data-attribute="c">Some info</div>
<div class="placemark-icon" data-attribute="d"></div>
<div class="placemark" data-attribute="d">Some info</div>
</article>
Ciascun article ha un background Image e le placemark-icon sono delle icone al cui click devono aprire i div di classe "placemark" mediante l'aggiunta di una classe "visible".
All'interno di ogni article al click di ogni icona apro il popup dell'icona interessata e chiudo le altre. Il click su un'icona chiude tutti gli altri popup delll'article.
Se invece clicco su un qualsiasi punto dell'immagine (tranne che sulle icone) e c'è un popup aperto chiudo tutto. Se non c'è nessun popup aperto e clicco sull'immagine apro tutti i popup.
Ogni immagine deve avere questa funzione separata rispetto alle altre. Sapreste darmi una mano con Jquery?
In pratica al momento faccio un click sull'icona mi prendo il data-attribute e apro il placemark che ha quel data-attribute tramite un toggleclass(visible) al click sull'icona.
Non riesco a gestire gli eventi relativi al click sulle immagini senza compromettere la funzione di cui sopra.