Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> slider - dodanie klas
klawisz123
post 23.02.2021, 13:06:15
Post #1





Grupa: Zarejestrowani
Postów: 30
Pomógł: 0
Dołączył: 24.05.2013

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


Witam,

Zaznaczę, że uczę się JS tym bardziej obiektowego

przerabiam slider, całość jest zrobiona na klasie z konstruktorem,

tak pokrótce pierwsza metoda generuje slider czyli:

- pobiera element który zamienimy na slider
- tworzy kontener(wrapper) dla slajdow
- pobiera elementy slajdów (dzieci wrappera)
- dodaje klase (slider__item) każdemu dziecku

następna metoda zmienia slidy, pokrótce dodaje klase active do aktualnego slidu:
  1. changeSlide(index) {
  2.  
  3. // petla po slajdach usuwająca klase active
  4. this.slides.forEach(slide => {
  5. slide.classList.remove("active");
  6. slide.setAttribute("hidden", true);
  7. });
  8.  
  9. //dodanie tylko wykrytemu
  10. this.slides[index].classList.add("active");
  11. this.slides[index].setAttribute("hidden", false);
  12.  
  13. //aktualny slider przestawiany na wybrany
  14. this.currentSlide = index;
  15.  
  16. }


Chciałbym dodać klase before i after tj. przed i po active, myślę zrobić to dość prosto na ifach smile.gif (skupiam się tylko na before, after bedzie analogicznie)

  1. this.slides.forEach(slide => {
  2. slide.classList.remove("active");
  3. slide.setAttribute("hidden", true);
  4. slide.classList.remove("before");
  5. });
  6.  
  7. //dodanie tylko wykrytemu
  8. this.slides[index].classList.add("active");
  9. this.slides[index].setAttribute("hidden", false);
  10.  
  11. let last = this.slides.length - 1;
  12.  
  13. // dodanie klas przed i po
  14. let tmp=this.slides[index];
  15. if (tmp == 0 ) {
  16. this.slides[index + last].classList.add("before");
  17. } else {
  18. this.slides[index - 1].classList.add("before");
  19. }
  20. //aktualny slider przestawiany na wybrany
  21. this.currentSlide = index;
  22. }


Nie wiem dlaczego if tak działa, że pobiera tylko instrukcje z else? i faktycznie dodaje before ale dla slida 0 już nie.
Oczywiście w slidzie ją jeszcze metody prev, next, pagination.

Z góry dzięki za każdą pomoc.
Go to the top of the page
+Quote Post
nospor
post 23.02.2021, 13:13:17
Post #2





Grupa: Moderatorzy
Postów: 36 440
Pomógł: 6290
Dołączył: 27.12.2004




A sprawdzales w ogole co zawiera TMP?


--------------------

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista
"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer

Go to the top of the page
+Quote Post
klawisz123
post 23.02.2021, 13:28:44
Post #3





Grupa: Zarejestrowani
Postów: 30
Pomógł: 0
Dołączył: 24.05.2013

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


tak to wygląda w konsoli (dla tmp):

https://ibb.co/pLy9hR3

po przejściu (next) wszystkich slidów

Ten post edytował klawisz123 23.02.2021, 13:29:34
Go to the top of the page
+Quote Post
nospor
post 23.02.2021, 13:30:07
Post #4





Grupa: Moderatorzy
Postów: 36 440
Pomógł: 6290
Dołączył: 27.12.2004




I gdzie tam widzisz tmp rowne 0? Bo ja nigdzie. Czemu wiec sie dziwisz ze
if (tmp == 0)
ci nie dziala?


--------------------

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista
"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer

Go to the top of the page
+Quote Post
klawisz123
post 23.02.2021, 13:40:58
Post #5





Grupa: Zarejestrowani
Postów: 30
Pomógł: 0
Dołączył: 24.05.2013

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


nom racja, tylko trzymałem się tego że działa instrukcja dla else, hmm ale ok już rozumiem, dzięki.

A jakaś mała podpowiedź smile.gif jak to ugryźć?

ok działa - zamiast tmp dałem this.currentSlide - takie banały ale przy nauce tak jest... dzięki za pomoc.

Serdecznie pozdrawiam smile.gif
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: 28.03.2024 - 13:32