Tani hosting

Pokazywanie i ukrywanie DIVów w JS
HanRayS Offline
Użytkownik

Liczba postów: 3
Reputacja: 0
Post: #1
Pokazywanie i ukrywanie DIVów w JS 01-04-2017 17:53
Witam, na wstępie chciałbym zaznaczyć, że dopiero co uczę się JavaScriptu. 
Chcę utworzyć skrypt, który po kliknięciu wyświetlanego diva będzie pokazywał diva, który jest w nim ukryty bądź będzie go ukrywał.

 Miałoby to wyglądać tak: 
- Jeśli kliknę pierwszego diva, ma pokazać się div, który jest w nim ukryty, a jeśli ten div jest pokazany, to ma się ukryć. 
- Jeśli kliknę drugiego diva ma dziać się to samo, lecz gdy jest pokazany ukryty div w pierwszym divie, ma on zostać ukryty. 

Stworzyłem na tą chwilę coś takiego: https://codepen.io/HanRayS/pen/oZmbKe niestety samo pokazywanie nie działa tak jak powinno. 

Co muszę zrobić aby uzyskać taki sam efekt którego potrzebuję? 
Z góry dziękuję za pomoc.
(Ten post był ostatnio modyfikowany: 01-04-2017 17:56 przez HanRayS.)
Cytuj
Diabeł Online
Użyszkodnik


Liczba postów: 777
Reputacja: 666
michalo2k Offline
Użytkownik

Liczba postów: 108
Reputacja: 18
Post: #2
RE: Pokazywanie i ukrywanie DIVów w JS 02-04-2017 18:15
Nie za trudny cel sobie wziąłeś na początek nauki w javascript? Efekt, który chcesz uzyskać można osiągnąć łatwiej za pomocą biblioteki jQuery, ale skoro chcesz zrobić to za pomocą czystego javascriptu, tu proszę bardzo.

Kod: https://codepen.io/anon/pen/BWMrmz

Po pierwsze ID musi być unikalne i nie powinno się powtarzać, więc jeśli chcesz pobrać kilka elementów to musisz posłużyć się getElementsByClassName.

Po drugie musisz rozbić tablicę getElementsByClassName na pojedyncze elementy za pomocą pętli for.

Krok trzeci to funkcja toggle i warunek If, który sprawdza czy element jest widoczny oraz jeszcze jeden for, który będzie ukrywał za każdym razem wszystkie elementy.

Pewnie dało by się to bardziej zoptymalizować, ale pisałem na szybkości Smile, Sam skorzystałem z małej pomocy stackoverflow, bo jednak nie piszę za dużo w czystym js, wolę jQuery.

P.S
Od kilku dni pisze coś podobnego na Githuba, tylko bardziej rozwiniętego Tongue.
(Ten post był ostatnio modyfikowany: 02-04-2017 18:20 przez michalo2k.)
Cytuj
HanRayS Offline
Użytkownik

Liczba postów: 3
Reputacja: 0
Post: #3
RE: Pokazywanie i ukrywanie DIVów w JS 03-04-2017 21:01
Dzięki wielkie Big Grin Co do id to zapomniałem zmienić na className gdyż na początku robiłem tylko na jednym divie, a później całego skopiowałem. Zmęczenie robi swoje Big Grin

Mam jeszcze jedno pytanie. Można mieszać czystego JS z jQuery czy nie jest to wskazane? 
Cytuj
michalo2k Offline
Użytkownik

Liczba postów: 108
Reputacja: 18
Post: #4
RE: Pokazywanie i ukrywanie DIVów w JS 03-04-2017 21:15
A czemu by nie ? To javascript i to javascript. Jednak podpinając jQuery powinieneś się starać wykorzystywać funkcję już zaimplementowane zamiast pisać je od początku, zaoszczędzając przy tym m.in. czas.
(Ten post był ostatnio modyfikowany: 03-04-2017 21:18 przez michalo2k.)
Cytuj
HanRayS Offline
Użytkownik

Liczba postów: 3
Reputacja: 0
Post: #5
RE: Pokazywanie i ukrywanie DIVów w JS 04-04-2017 18:42
Sprawdziłem bibliotekę jQuery i faktycznie o wiele szybciej da się zrobić taki skrypt, aczkolwiek napotkałem 2 problemy:

- Kliknięcie pierwszego diva rozwija i chowa obydwa divy,
- Kliknięcie w przyciski wewnątrz diva zamykają go.

Naskrobałem coś takiego: https://codepen.io/HanRayS/pen/QpPLjJ

Oraz kolejne pytanie, czy używając jQuery wystarczy podstawowa znajomość JS, czy nie? Na tą chwilę zdążyłem zauważyć, że operuje się na metodach(?), aczkolwiek to są moje pierwsze kroki w tej bibliotece więc nie wiem, z czym to się je.
Cytuj
michalo2k Offline
Użytkownik

Liczba postów: 108
Reputacja: 18
Post: #6
RE: Pokazywanie i ukrywanie DIVów w JS 04-04-2017 19:00
Jako, że zaczynasz dopiero przygodę z javascript, to pozostań na razie przy czystym js, a dopiero za jakiś czas zacznij bawić się z jQuery.
Cytuj


Skocz do:


Użytkownicy przeglądający ten wątek: 1 gości