OK wrócimy.
Więc myślę, że nadszedł czas, aby dać trochę tego strzału na własną rękę.
Więc mam szybki ćwiczenia.
Wszystko, co musisz zrobić, to utworzyć nowy wiek lub złożyć nowy plik JavaScript i dodać pojedynczy przycisk z wiekiem do mojego pliku.
to jest to!
A następnie po kliknięciu tego przycisku wszystko co musisz zrobić, to zmienić kolor tła ciała z białego na fioletowy.
Jak to zrobiłeś.
Zostawię ją do siebie.
Istnieje kilka różnych sposobów, że można to zrobić ze względu na różne rzeczy, które Mówiliśmy o tak daleko, ale trzeba uruchomić jakiś kod po kliknięciu na przycisk i kod powinien zmienić kolor tła pomiędzy dwoma kolorami czy to fioletowy i biały lub wybrać jakieś lepsze kolory.
Całkowicie się z tobą.
Więc Pasic wideo teraz.
Daj, że uderzenie na własną rękę.
To naprawdę ważne, aby to zrobić, a następnie wrócić, gdy jesteś gotowy i pójdziemy na rozwiązanie razem.
OK.
Więc pomówmy o tym, jak możemy dokonać tej pracy.
Na początek potrzebujemy wieku kobiet plik, który mam tu trzeba dodać w moim HMO.
Nazwijmy ten kolor przełącznik i wszystko, co potrzebne jest jeden przycisk, a my po prostu dodaj kliknij mnie tak po prostu.
Teraz musimy nasz plik JavaScript i możemy łatwo zrobić coś, gdzie wystarczy dodać tag skryptu tu i na naszym javascript tam, ale nie jest to wielka praktyka.
Więc po prostu dostać w dobrym zwyczaju i zrobić nowy plik będziemy nazywać go po prostu przełącznik.
J. S. w tym samym katalogu i wewnątrz jak zawsze chciał zrobić dodam alert po prostu mieć pewność, że nawiązaniu OK, a następnie musimy iść i Link do tego skryptu i że musi być równa przełączania źródła dot Jay Tak właśnie tak.
Więc chodźmy do przodu i otworzyć ten plik w przeglądarce i zobacz, co mamy.
Pierwszą rzeczą, którą będę podkreślić tutaj.
Zauważ, że mamy alert, który mówi rzeczy są połączone, ale przycisk nie jest jeszcze na stronie.
Tak więc w rzeczywistości nie widać przycisku dopóki nie pozbyć się alertu.
I to jest bardzo ważne i chcemy to naprawić.
Co to mówi nam, że nasz kod tutaj jest uruchomiony zanim przycisk znajduje się na stronie w ogóle i kod, który zamierzamy napisać będzie polegać na tym przycisku znajduje się na stronie.
Nie możemy dodać szybkie słuchacza w inny detektor zdarzeń będzie się tylko do pracy i dodawać wydarzenia do elementów znajdujących się na stronie w momencie, który jest prowadzony.
Więc mamy kilka sposobów mocowania tego.
Najprostszym na razie jest po prostu przenieść nasz skrypt w dół do końca korpusu tak, że wiemy na pewno OK, przycisk ten został załadowany.
Dowiemy się o inny sposób to zrobić, gdy mamy do Jay zapytania, ale to działa perfekcyjnie do teraz.
Jeśli więc odświeżyć teraz zobaczysz przyciski już tam jest.
A potem mamy alert, który mówi, podłącz go.
Więc teraz pomówmy o logice.
Chodźmy do naszej przełączania J.S. i wybierz przycisk.
Tak Przycisk var równa zapytań dokumentu przycisk wyboru i że jest tylko jeden sposób, aby wybrać go oczywiście.
A potem chcemy dodać nasz detektor zdarzeń przycisku, który dodać detektor zdarzeń kliknięcia, a następnie naszą funkcję, która będzie uruchomić funkcję zwrotną tak po prostu tak.
I zawsze chciał zacząć od nowa z wpisem, że po prostu mówi kliknąłeś by upewnić się, że mamy do wyboru słuszne i że funkcja ta polega na uruchomieniu.
Kiedy robimy kliknij aby odświeżyć Miejmy kliknij i mamy kliknięciu.
Więc to jest wielki.
Rzeczy są podłączone prawidłowo teraz wszystko, co musisz zrobić, to zmienić kolor tła ciała.
Więc chciałbym zacząć po prostu robi dokument ciało zrzutu i niech po prostu ustawić się na fioletowo.
Więc dokumentować się styl ciała, że ​​tło jest równa fioletowy i zobaczysz kiedyś dokument dot ciała.
Możemy również zrobić dokument kwerendy selektora i podać nazwę znacznika ciała lub coś takiego dokumentu diked uzyskać elementy o nazwie znacznika zerowego ciała, ale o wiele łatwiej po prostu użyć dokumentu dot ciała.
To tylko skrót, który jest wbudowany w dokumencie.
Więc ja, że ​​mogę zmienić go na fioletowy i powinniśmy być dobry, aby udać się tutaj.
Jeśli kliknę otrzymujemy fioletowy ciało, ale oczywiście częścią tego problemu zostało przełączanie tam iz powrotem.
Więc kiedy kliknij tutaj wraca do bieli, a potem kliknij ponownie wraca do fioletu i utrzymuje przełączanie między nimi.
Więc to, co musimy zrobić, to dodać trochę logiki i nasza logika będzie wyglądać mniej więcej tak, jeśli bieli może uzyskać fioletowy innego zrobić to z czymś takim.
Więc sposób, że mam zamiar się tym zająć Zamierzam stworzyć wartość logiczną nazwie jest fioletowy Savar jest fioletowy i to ruszy fałszywa, ponieważ gdy odświeżam stronę to nie jest tak, fioletowy fioletowy jest fałszywe.
A potem, co musimy zrobić, to wewnątrz naszej javascript mamy zamiar sprawdzić, czy jest fioletowy.
Więc jeśli to jest fioletowy, a następnie będziemy chcieli, aby kolor tła biały podobnie jak ten.
A zmiana musi być biały, a następnie przeciwnym razie zrobimy to samo z wyjątkiem zrobimy to fioletowy.
Jedynym problemem jest to, że oczywiście jest fioletowy teraz jest zawsze fałszywe.
Jedziemy chce to zmienić.
Więc jeśli jest fioletowy, jeśli jest fioletowy dokument do nadwozia, ale tło jest równe białe a potem powie jest fioletowy jest teraz nazywa się fałszywe, ponieważ po prostu go zmienić kolor na biały, a potem, kiedy powiedział, że jest fioletowy powiedzielibyśmy jest fioletowy równa prawdziwe.
I to musi być wartość logiczna oczywiście nie jest prawda, czy ciąg ciąg fałszywe.
Więc co zrobiliśmy tutaj, to stworzyć swój mały cel trackera.
Ta logiczna jest fioletowy startu jest fałszywe.
Za pierwszym razem przez to jest fioletowy.
To się nie dzieje.
Więc idziemy do indziej zmienić tło być fioletowy i fioletowy jest prawdą.
Więc następnym razem, gdy użytkownik kliknie to fioletowy, że teraz jest prawdą.
Jeśli więc zmienić tło być białe, a następnie jest fioletowy jest ustawiona na false, a my ciągle przełączanie tam iz powrotem.
Więc odświeżania Rada sprawdzania pilnuje mamy żadnych błędów.
A teraz spróbujmy klikając fioletowy biały fioletowy i biały.
Więc tam mały współczynnik ponownie, że możemy zrobić co jest nie musimy ustawić się fioletowy być fałszywe i jest fioletowy, żeby było prawdziwe wewnątrz if.
Mamy krótszą drogę robi, że po prostu piśmie.
Czy nie jest równa fioletowy fioletowy.
Więc to po prostu będzie przełączać je między prawdą i fałszem, czy fałszywe i prawdziwe tylko neguje go.
Tak, że jest ładny skrót.
Widać tutaj, że teraz nadszedł Heigl i to trochę krótsze, ale nie ma jeszcze krótszy sposób prowadzenia biura, które miejmy nadzieję, że niektórzy z was myślał o tym, kiedy dowiedzieliśmy się o liście klasowej.
Była to metoda zwana przegubowego.
Jeśli więc zdefiniować CSA klasie i chodźmy naprzód i zrobić, że zamiast mojego stylu Idę zrobić tag stylu teraz i dodać klasę o nazwie Dot.
I niech po prostu nazwać fioletowy lub po prostu fioletowy.
To jest nazwa klasy, a my po prostu powiedzieć tło jest fioletowy i to wszystko, co musimy zrobić, co mamy zamiar zrobić, to włączyć tę klasę i wyłączać na ciele.
Więc wróć tu i będę po prostu skopiować to na teraz i odliczył i wszystko, co trzeba zrobić, to po kliknięciu na przycisk i komentują to uwagę lub pozbyć się tego pozbyć to za dobrze.
Wszystko to wszystko, co chcesz zrobić, to udokumentować się ciała.
Bezklasowe przegubowego.
A następnie nazwę klasy po prostu wykonane nazywano fioletowy.
Więc pamiętaj, co to zrobi to, jeśli organizm nie ma klasy o nazwie fioletowy będzie go dodać.
Ale to sprawdza, czy to ma nazwę klasy fioletowy już.
Będzie ją usunąć.
Tak więc nie trzeba śledzić, czy to fioletowy lub biały.
Obecnie, jeśli klasa jest zastosowane lub jeżeli nie jest to, że nie potrzebujemy to fioletowy Boullion więcej.
To w zasadzie wszystko opakowane zamiast bezklasowego przełączania.
Więc odświeżyć.
Klikam i widać, że wygląda tak samo.
Ale jeśli inspekcji i patrzymy na ciało.
No to ruszamy.
Klasa Wskazówki równa fioletowy.
A potem kliknij i teraz nie mamy już klasyczny fioletowy.
To odchodzi.
To dokumentuje się ciało.
Lista przełącznik klasy, który jest naprawdę bardzo przydatne.
To dużo krótsza niż tej logiki tutaj.
Dobrze więc, że to moje rozwiązanie.