Tutto ok.
Ben tornato.
E questo video inizieremo affrontando alcune delle funzionalità di base del nostro elenco.
Cominceremo in modo semplice e semplice aggiungendo gli ascoltatori veloci agli alleati in modo tale che
quando clicchiamo otteniamo un piccolo effetto barrato che potete vedere qui e che si manifestano.
E prima di farlo, in realtà cambierò un po 'il nostro background qui.
Ho intenzione di sbarazzarmi di quello sfondo.
E poi aggiungerò un bordo.
Quindi il nostro bordo sarà di due pixel grigio solido solo un piccolo cambiamento ma lo renderà più facile da
vedere quando giriamo questi grigi.
Se avessimo un ottimo background, si confonderebbe completamente.
OK.
Quindi quello che vogliamo succedere è quando clicchiamo su un alleato il testo all'interno dell'occhio è grigio e aggiungiamo un
effetto barrato.
Quindi andiamo al nostro file javascript.
un semplice commento in cui possiamo effettuare il check-out specifico su Dewes facendo clic e quindi facciamo in modo che funzioni.
Iniziamo aggiungendo
Quindi dobbiamo selezionare tutti gli alleati.
Quindi tutto ciò che dobbiamo fare è alleare invece del simbolo del dollaro e poi faremo un clic.
E quando clicchiamo qui è la funzione che vogliamo eseguire la funzione di callback e
inizieremo con un semplice allerta cliccato alleato e torneremo indietro e assicurarci che quando aggiorniamo e clicchiamo su un alleato ci dice che abbiamo
fatto clic su un alleato ma da nessun'altra parte ciò accade.
Grande.
proprietà color e trasformare il colore grigio e la proprietà di decorazione del testo e farla passare.
Quindi lavoriamo sul cambiamento del singolo alleato su cui abbiamo fatto clic e cambiando il colore del colore e
la barra o l'effetto di decorazione del testo piuttosto che avvisare cosa vogliamo fare è usare il metodo CSSA
puntino e con quello vedremo SS. Stiamo andando a vuoi lavorare con la
Iniziamo con il colore.
Quindi sembrerebbe grigio di colore proprio così.
E poi dobbiamo decidere cosa stiamo applicando a ciò che stiamo selezionando.
E questo non è quello che vogliamo fare se selezioniamo semplicemente una bugia e ci facciamo più ghiotti.
è un po 'difficile vedere se faccio qualcosa di più ovvio come il rosso quando clicco.
Ora quando clicco, diventano tutti grigi e so che
Diventano tutti rossi e non è ciò che vogliamo ciò che vogliamo, ma è solo quello su cui è stato fatto clic.
Ed è qui che la parola chiave arriva con il wrapper J Querrey.
Questo si riferisce alla menzogna specifica su cui è stato fatto clic e vogliamo cambiare solo quello che ci mostra in modo che
il suo colore sia grigio.
E lo metteremo alla prova.
Ora clicco sull'alleato individuale e diventa grigio.
Ovviamente non torna al nero quando clicco di nuovo.
Non abbiamo quella funzionalità.
Ora otteniamo la barratura con un effetto linea passante in modo che possiamo fare un'altra riga come questa.
Questo ci SEUS e poi i due punti della decorazione del testo o la linea della virgola che attraversano e salvano e tornano a mancare
un Prentis vedere qui.
Ora quando clicchiamo otteniamo un effetto barrato e il colore diventa grigio.
Ma ovviamente c'è sempre un modo più semplice per farlo.
Quindi, piuttosto che farlo su due righe separate, potresti aver ricordato come potremmo definire
l'oggetto con coppie di valori chiave e fare una sola chiamata CSSA.
Quindi abbiamo aggiunto un oggetto qui proprio così e dobbiamo aggiungere una virgola di colore grigio.
E questo è un po 'complicato se scriviamo la decorazione di Dasch nell'oggetto e impostiamo quella linea.
E io risparmio e rinfresco vedi che non succede nulla.
In realtà ottengono un errore perché in javascript Non è possibile avere nomi di proprietà che
contengono trattini.
Quindi, se stiamo usando la sintassi in cui definiamo un oggetto, abbiamo bisogno di usare una dichiarazione di testo sul caso cammello che
sia sempre un po 'complicata.
trova la decorazione del testo in modo tale proprietà CSSA e applica la linea e il colore grigio.
E se siamo freschi Ora puoi vedere che
La prossima cosa che potresti voler fare è tornare indietro al nero e sbarazzarti della linea
con un clic.
Per farlo useremo una semplice istruzione IF.
Quindi controlleremo se Ally è grigio, altrimenti lo trasformeremo in
nero,
altrimenti diventerà grigio.
Quindi per verificare se la bugia è grigia possiamo fare se e possiamo usare questa roba.
SS E se lo facciamo così, quindi se per controllare se un alleato è grigio possiamo effettivamente usare questo punto C Ss e chiedergli il colore
senza fornire un altro valore e questo recupererà il colore corrente.
Quindi avremo una dichiarazione if se questo vedesse che il senso del colore è uguale al grigio.
Facciamo solo un registro di concerti che al momento è grigio e questo è tutto per iniziare.
Quindi puliamo un po 'questo e
non ce l'abbiamo, altrimenti lo lasciamo com'è e torniamo indietro.
Quindi, se aggiorniamo e apriamo la console e faccio clic su uno di questi, non ci dice ancora
nulla perché non è grigio.
Ma ora se clicco ancora non funziona ancora.
E la ragione è un po 'complicata.
Se torniamo qui.
Diamo un'occhiata a ciò che fa il colore CSSA al di fuori dell'istruzione if.
Quindi faremo una console che registra.
Questo avvia il colore SS e aggiorna la pagina.
E quando clicco vedrai che inizia come R. G. 000.
nuovo, stiamo impostando il colore in grigio e pensiamo che sia grigio in questo momento se lo esaminiamo.
E se clicco di
Dice che il colore è grigio ma quando clicco di nuovo è in realtà il R. G. versione.
Quindi, quando ci confrontiamo per verificare se il colore è uguale a Gray, non funzionerà.
Dobbiamo confrontarlo con R. G. essere 1 2 8 1 2 8 1 2 8.
E ora se proviamo questo e aggiorniamo dovremmo vedere quando clicco per la prima volta non clicco di nuovo.
Ora dice che è attualmente grigio.
OK.
Quindi possiamo usarlo.
Quindi, invece di limitarsi a stampare, è attualmente grigio.
Quello che vogliamo fare è girarlo in nero.
Quindi faremo una cosa che ci vedrà a colori e torneremo al nero.
Proprio così.
E poi possiamo gestire la decorazione del testo in un secondo.
Quindi aggiorniamo e clicchiamo e diventiamo grigi.
E se clicco ancora, non funzionerà ancora.
E questo perché lo stiamo solo sovrascrivendo alla fine qui.
Lo stiamo facendo diventare grigio ogni volta.
Quindi vogliamo spostarlo nel nostro altro, quindi aggiungeremo un'altra istruzione qui e lo faremo solo se al
momento non è Gray.
Tutto ok.
Quindi dovremmo essere bravi.
Ora spostiamo questo commento qui ripuliamo le cose un po 'e aggiorniamo.
Facciamo clic e diventa grigio, cuoce nuovamente, torna al nero.
Abbiamo ancora la linea, ma almeno il colore sta cambiando.
Quindi per sbarazzarci della linea tutto ciò che dobbiamo fare è semplicemente copiare questo o rifare un oggetto.
E invece di impostare il colore come grigio, lo renderemo nero.
E piuttosto che la decorazione del testo da sfogliare, lo imposteremo come none.
E ora, se fossimo freschi e reali, stiamo attivando e disattivando il punto in cui abbiamo il grigio
e la linea.
Spero che mentre stiamo affrontando questo si vede che è un sacco di lavoro per fare questo controllo.
È attualmente grigio.
RGV 128 128 128 se lo è, lo renderemo nero e rimuovere la decorazione del testo.
Altrimenti fai questo.
C'è un modo molto più semplice per cui non dobbiamo effettivamente fare nessuna di queste logiche.
Quello che possiamo fare è creare una classe in modo da creare una classe nelle nostre C S
e la chiameremo completata o appena completata e il colore sarà grigio.
Non abbiamo bisogno di quelle citazioni.
Non siamo in javascript e la decorazione del testo sarà una linea attraverso e salvare e quindi lo faremo.
codice e tutto è stato cancellato e tutto ciò che vogliamo fare è questa linea di puntamento abilitata alla linea
singola.
Sì, possiamo davvero sostituire tutto questo
Quindi, quando clicchiamo su un alleato, attiveremo la classe sulla diapositiva che abbiamo cliccato sulla classe
completata e che la renderà grigia e gli darà un effetto linea passante e manterrà traccia
di se è necessario rimuoverla o aggiunto automaticamente.
Quindi puoi vedere qui sembra esattamente lo stesso come prima.
Ma dovevamo solo scrivere una riga di codice piuttosto che una decina di righe e il prossimo video parlerà di come
possiamo effettivamente ottenere la X per portarla a fare