Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [JavaScript] Zmiana obrazka po najechaniu
Czikusek
post 11.07.2018, 08:32:34
Post #1





Grupa: Zarejestrowani
Postów: 5
Pomógł: 0
Dołączył: 11.07.2018

Ostrzeżenie: (0%)
-----


Mam sobie 3 obrazki, które po kliknięciu w nie wyświetlają odpowiednią do nich treść (krótką). Napisałem w JS na atrybucie data-id wyświetlanie odpowiedniej treści do klikniętego obrazka. Działa fajnie. Teraz chciałbym jeszcze zrobić taki myk, że obrazek, który jest aktualnie kliknięty jest podświetlany. Mam takie coś:

  1. <div class="obrazek" data-id="1"><img src="src" /></div>
  2. <div class="obrazek" data-id="2"><img src="src" /></div>


... a w jQuery sobie napisałem:

  1. $("obrazek img").click(... attr("src", "obrazek_podswietlony");


... no i ogólnie jest ok, obrazek zmienia się na podświetlony. Tyle tylko, że ten, który został podświetlony zostaje dalej podświetlony i podświetla się następny. A jak po kliknięciu w inny obrazek ten stary odświetlić?

Zrobiłem tak, że po .click() w obrazek, zmienia się zmienna "wcisniete = numer_obrazka".

Dalej zrobiłem tak:

if (wcisniete != 1) { tutaj zdarzenie .hover() { attr("src", "obrazek_podswietlony"); }

.. no ale dalej nie działa
Go to the top of the page
+Quote Post
trueblue
post 11.07.2018, 08:58:30
Post #2





Grupa: Zarejestrowani
Postów: 5 101
Pomógł: 1419
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


Najpierw wszystkim odznaczasz, a potem wybranemu zaznaczasz.
Domyślna wartość src dla atrybutu src, to nie jest dobry pomysł.
Go to the top of the page
+Quote Post
Czikusek
post 11.07.2018, 09:19:31
Post #3





Grupa: Zarejestrowani
Postów: 5
Pomógł: 0
Dołączył: 11.07.2018

Ostrzeżenie: (0%)
-----


No dobra, a jak zrobić że po najechaniu zmienia się na podświetlony? Funkcja hover() działa, ale to mi psuje efekt podświetlenia po kliknięciu, bo kliknę w obrazek - podświetli, ale od razu usuwa podświetlenie bo działa tu funkcja onmouseout. Co robić?
Go to the top of the page
+Quote Post
trueblue
post 11.07.2018, 09:32:50
Post #4





Grupa: Zarejestrowani
Postów: 5 101
Pomógł: 1419
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


Do hover używaj wyłącznie CSS, a nie jQuery, do obsługi click klasy (dodając lub usuwając klasę z elementu).

  1. element:hover,
  2. element.clicked{
  3. //tu jakiś styl dotyczący podświetlenia
  4. }

Go to the top of the page
+Quote Post
Czikusek
post 11.07.2018, 10:05:24
Post #5





Grupa: Zarejestrowani
Postów: 5
Pomógł: 0
Dołączył: 11.07.2018

Ostrzeżenie: (0%)
-----


No ale to musiałbym obrazki wrzucić w formie <div class="obrazek1"></div> zamiast <img src="obrazek1" /> tak?
Go to the top of the page
+Quote Post
trueblue
post 11.07.2018, 10:25:25
Post #6





Grupa: Zarejestrowani
Postów: 5 101
Pomógł: 1419
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


A co ma do tego <div>, skoro podpinasz click do obrazka?
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 16.07.2018 - 09:32