skrypt js w pętli php

Question

Witam, podobny problem był już na forum jednak nie ma tam odpowiedzi która mnie zadowala więc zadam pytanie jeszcze raz :)

Otóż, mam pętle php która wyświetla kilka produktów na stronie. W każdym okienku jest przycisk "+". Jeśli najedziemy myszką na przycisk obok ma pokazać się okienko "Dodaj do koszyka". W jQuery osiągnąłem ten efekt w taki sposób:

$(document).ready(function()
{
    $('#Show').mouseover(function(){
        $('#plus').toggle();
    });
});

Problemem jest jednak to że produkty wyświetla pętla i jest ich kilka, id(#) ma być unikatowe a po wyświetleniu w pętli nie jest i mój skrypt działa tylko dla pierwszego elementu pętli, dla pozostałych nie istnieje.

Moje pytanie brzmi: jakiej funkcji jQuery użyć lub jak osiągnąć efekt w którym skrypt będzie działał dla każdego elementu w pętli? Myślałem żeby użyć klas zamiast id jednak wtedy po najechaniu na jeden przycisk działało by to dla wszystkich elementów.

Dzięki :)

Answer 1

To po użyciu class, żeby nie działało na wszystkich elementach, przekaż do funkcji referencje do obiektu na który najechałeś myszką. W bibliotece $ służy do tego this. 

Comments

Kod z użyciem klas wyglądałby tak:

$(document).ready(function()
{
    $('.class').mouseover(function(){
        $('.class1').toggle();
    });
});

i  w którym miejscu powinno być $(this) żeby to działało?

---

z ".class" powininieneś poprzez this uruchomić element (w środku niego?) class1. Pokaz Kod html.

---

https://codepen.io/mi-20/pen/mpRBJG

---

Na Twoim miejscu zmieniłbym strukturę html. Na obecnej z wykorzystaniem $, proponuję: https://codepen.io/anon/pen/KZaXvz Dzięki $(this) odnoszę się do elementu na który trafiła mysz, następnie używam funkcji next(), ona daje mi referencję do następnego elementu (sąsiada) w hierarchi DOM, i to na nim wykonuje toggle().