OK, torneremo.
Quindi penso che sia il momento per te di dare un po 'di tutto questo a te stesso.
Quindi ho un rapido esercizio.
Tutto ciò che devi fare è creare una nuova era o creare un nuovo file javascript e aggiungere un singolo pulsante all'età
del mio file.
Questo è tutto.
E poi quando clicco su quel pulsante tutto quello che devi fare è cambiare il colore di sfondo del corpo
dal bianco al viola.
Come farlo.
Lo lascerò a te.
Ci sono diversi modi in cui potresti farlo date le diverse cose di cui abbiamo parlato fino
ad ora, ma devi fare un po 'di codice quando fai clic sul pulsante e quel codice dovrebbe cambiare
il colore dello sfondo tra due colori, sia che sia viola e bianco o scegli colori migliori.
Totalmente a te.
Quindi video Pasic adesso.
Dai un colpo a te stesso.
È molto importante farlo e poi tornare quando sei pronto
e insieme risolveremo una soluzione.
OK.
Quindi parliamo di come possiamo farlo funzionare.
Per prima cosa abbiamo bisogno di un file femminile invecchiato che devo aggiungere qui nel mio HMO.
Chiamiamo questo interruttore a colori e tutto ciò di cui abbiamo bisogno è un singolo pulsante e aggiungeremo
semplicemente click me così.
in cui aggiungiamo semplicemente un tag script qui e sul nostro javascript, ma non è una buona pratica.
Ora abbiamo bisogno del nostro file javascript e potremmo fare facilmente qualcosa
Quindi, solo per farti avere l'abitudine giusta e creare un nuovo file, lo chiameremo semplicemente.
J. S. nella stessa directory e dentro come sempre mi
piace fare aggiungo un avviso solo per assicurarmi che siano connessi OK e quindi dobbiamo andare
e collegarci a quello script e che deve essere sorgente equivale al punto di commutazione Jay Sì, solo come quello.
Quindi andiamo avanti e apriamo questo file nel browser e vediamo cosa otteniamo.
La prima cosa che farò notare qui.
Si noti che abbiamo ricevuto l'avviso che dice che le cose sono collegate ma il pulsante non è ancora sulla pagina.
Quindi in realtà non vediamo il pulsante fino a quando non mi libero dell'allarme.
E questo è molto importante e vogliamo aggiustarlo.
Quello che ci dice è che il nostro codice qui sopra è in esecuzione prima che il pulsante sia sulla pagina e il
codice che andremo a scrivere si baserà sul fatto che il pulsante si trova sulla pagina.
Non possiamo aggiungere un listener veloce, altrimenti il ​​listener di eventi funzionerà e aggiungerà eventi agli elementi presenti nella
pagina nel momento in cui viene eseguito.
Quindi abbiamo alcuni modi per risolvere questo problema.
nostro script fino alla fine del corpo in modo da sapere con certezza che questo pulsante è stato caricato.
Il più semplice per ora è solo spostare il
Impareremo un altro modo per farlo quando arriveremo alla query su Jay, ma per ora
funziona perfettamente.
Quindi, se aggiorniamo ora vedrai i pulsanti già lì.
E poi otteniamo l'avviso che dice collegarlo.
Quindi ora parliamo della logica.
Andiamo al nostro interruttore J. S. e selezionare il pulsante.
Quindi il pulsante var equivale al pulsante di selezione delle query sui documenti e questo è solo un modo per selezionarlo, ovviamente.
E poi vogliamo aggiungere il nostro listener di eventi in modo che il pulsante aggiunga il listener di
eventi e poi la nostra funzione che eseguirà la funzione di callback proprio così.
E mi piace sempre ricominciare da capo con un avviso che dice semplicemente cliccato solo per essere sicuro che stiamo selezionando la cosa
giusta e che questa funzione è in esecuzione.
Quando facciamo clic su Aggiorna, facciamo clic e otteniamo clic.
Quindi è grandioso.
Le cose sono collegate correttamente ora tutto ciò che dobbiamo fare è cambiare il colore di sfondo del corpo.
Quindi vorrei iniziare semplicemente facendo il corpo del dump del documento e impostiamolo come viola.
Quindi documenta lo stile del corpo che lo sfondo è uguale al viola e vedrai che ho usato il corpo del punto del documento.
Potremmo anche fare un documento che interrompe il selettore e dare il nome del tag body o qualcosa di simile
a documento acquisito da elementi get per nome tag body zero ma è molto più facile usare il body dot del documento.
È solo una scorciatoia integrata nel documento.
Così faccio che lo cambio in viola e dovremmo essere bravi ad andare qui.
Se clicco, otteniamo un corpo viola, ma ovviamente parte di questo problema è stata la commutazione avanti e indietro.
Quindi quando clicco qui torna al bianco e poi clicco di nuovo e torna in viola e continua
a passare tra i due.
Quindi quello che dovremo fare è aggiungere un po 'di logica e la nostra logica assomiglierà a
qualcosa del genere se il bianco potrebbe diventare viola altrimenti farlo con qualcosa del genere.
Quindi il modo in cui gestirò questo creerò un valore booleano chiamato è
viola. Savar è viola e inizierà come falso perché quando aggiorno la pagina non è viola, quindi viola
è falso.
E poi quello che dovremo fare è all'interno del nostro javascript che controlleremo se è viola.
Quindi, se è viola, vorremmo rendere bianco il colore dello sfondo proprio
come questo.
E il
cambiamento deve essere bianco e poi altrimenti faremo la stessa cosa, tranne che lo renderemo viola.
L'unico problema, naturalmente, è che il viola in questo momento è sempre falso.
Vogliamo cambiarlo.
Quindi se è viola se è viola il documento fino allo stile del corpo ma lo sfondo è uguale al
bianco e quindi dovremmo dire che il viola è ora chiamato falso perché lo cambiamo in bianco e poi
quando diciamo che è viola diremmo è il viola è uguale al vero.
E questo deve essere un valore booleano, ovviamente non la stringa true o la stringa false.
Quindi quello che abbiamo fatto qui è creare il nostro piccolo target tracker.
Questo booleano è viola dall'inizio è falso.
La prima volta è viola.
Questo non succede
Quindi andiamo al resto, cambiamo lo sfondo per essere viola e quindi il viola è ora vero.
Quindi la prossima volta che l'utente fa clic è viola che è ora vero.
Quindi se cambiamo lo sfondo per essere bianchi e quindi viola è impostato su falso e continuiamo a
cambiare avanti e indietro.
Quindi il consiglio di refresh control fa in modo di non avere errori.
E ora proviamo a fare clic su viola bianco viola e bianco.
Quindi c'è un piccolo fattore di ri che possiamo fare, che non dobbiamo impostare è viola per essere
falso ed è viola per essere vero all'interno dell'istruzione if.
Abbiamo un modo più breve per farlo solo scrivendo.
Il viola è uguale a non è viola.
Quindi questo lo cambierà tra vero e falso o falso e vero lo negherà.
Quindi questa è una bella scorciatoia.
Puoi vedere qui ora è Heigl's ed è un po 'più breve ma c'è un modo ancora più breve
di fare ufficio, sperando che qualcuno di voi abbia pensato a quando abbiamo imparato a conoscere l'elenco delle classi.
C'era un metodo chiamato interruttore.
Quindi, se definiamo un CSA come classe e andiamo avanti e lo facciamo al posto del
mio stile, creerò per ora un tag di stile e aggiungo una classe chiamata Dot.
E chiamiamolo viola o solo viola.
Questo è un nome di classe e diremo semplicemente che lo sfondo è viola e che è tutto ciò di cui abbiamo bisogno per fare
ciò che stiamo per fare è attivare e disattivare questa classe sul corpo.
Quindi torna qui e ho intenzione di copiare questo per ora e contato e tutto quello che dobbiamo fare è quando
si fa clic sul pulsante e commentano questo o sbarazzarsi di questo sbarazzarsi di questo pure.
Tutto ciò che vogliamo fare è documentare il corpo.
Attiva senza classi.
E poi il nome della classe che abbiamo appena creato era chiamato viola.
Quindi ricorda che cosa farà questo se il corpo non ha la classe chiamata viola lo aggiungerà.
Ma controlla se ha già il nome della classe viola.
Lo rimuoverà.
Quindi non dobbiamo tenere traccia di se è viola o bianco.
Attualmente se la classe è applicata o se non lo è non abbiamo bisogno che questo sia il Boullion viola più.
Fondamentalmente è tutto racchiuso al posto di un interruttore senza classi.
Quindi mi rinfresco.
Clicco e puoi vedere che sembra lo stesso.
Ma se ispezioniamo e guardiamo il corpo.
Eccoci qui.
La classe di avviso è uguale a viola.
E poi clicco e ora non abbiamo più la classica viola.
Va via.
Questo è documentato.
Commuta la lista delle classi che è davvero molto utile.
È molto più corto di questa logica qui.
Va bene, questa è la mia soluzione.