Funzione per singoli elementi con le stesse classi

[NowWeb]

Salve,
essendo nuovo nel forum di HTML.IT cercher� di essere pi� chiaro possibile:

ho bisogno di aiuto riguardo una funzione che voglio implementare, in effetti ho creato uno slider di immagini contenute nell'elemento con classe ".item" dove, quando clicco sull'immagine deve apparire l'elemento con classe ".popover" che contiene le informazioni riguardanti l'immagine cliccata. Il problema sta che quando clicco su un'elemento ".item" si aprono tutti gli altri elementi ".popover" mentre invece per ogni immagine deve apparire il rispettivo ".popover". Di seguito il codice che fino ad adesso ho scritto:

<!-- HTML -->

<div class="now-carousel owl-theme">
<div class="item" >
<div class="popover">ciao</div>
<a href="#">
<img src="../img/nowspot-carousel/piatto1.jpg">
</a>
</div>
<div class="item">
<div class="popover">ciao</div>
<a href="#">
<img src="../img/nowspot-carousel/piatto2.jpg">
</a>
</div>
<div class="item">
<a href="#">
<img src="../img/nowspot-carousel/piatto3.jpg"
</a>
</div>
</div>




//JAVASCRIPT
$('.popover').hide();

$('.item a').on('click', function(){
$('.popover').toggle();
});

Spero di esseremi spiegato bene e che possiate aiutarmi

[cavicchiandrea]

$('.item a').on('click', function(){
$(this).prev('.popover').toggle();

[NowWeb]

Grazie mille cavicchiandrea! funziona