1
00:00:00,330 --> 00:00:00,660
Tutto ok.

2
00:00:00,650 --> 00:00:01,490
Ben tornato.

3
00:00:01,680 --> 00:00:06,210
E questo video inizieremo affrontando alcune delle funzionalità di base del nostro elenco.

4
00:00:06,210 --> 00:00:11,400
Cominceremo in modo semplice e semplice aggiungendo gli ascoltatori veloci agli alleati in modo tale che

5
00:00:11,730 --> 00:00:16,380
quando clicchiamo otteniamo un piccolo effetto barrato che potete vedere qui e che si manifestano.

6
00:00:16,890 --> 00:00:20,750
E prima di farlo, in realtà cambierò un po 'il nostro background qui.

7
00:00:21,000 --> 00:00:22,910
Ho intenzione di sbarazzarmi di quello sfondo.

8
00:00:23,190 --> 00:00:25,020
E poi aggiungerò un bordo.

9
00:00:25,200 --> 00:00:33,630
Quindi il nostro bordo sarà di due pixel grigio solido solo un piccolo cambiamento ma lo renderà più facile da

10
00:00:33,630 --> 00:00:35,800
vedere quando giriamo questi grigi.

11
00:00:35,880 --> 00:00:39,170
Se avessimo un ottimo background, si confonderebbe completamente.

12
00:00:39,490 --> 00:00:40,180
OK.

13
00:00:40,200 --> 00:00:47,370
Quindi quello che vogliamo succedere è quando clicchiamo su un alleato il testo all'interno dell'occhio è grigio e aggiungiamo un

14
00:00:47,370 --> 00:00:48,190
effetto barrato.

15
00:00:48,570 --> 00:00:50,930
Quindi andiamo al nostro file javascript.

16
00:00:51,210 --> 00:01:00,780
un semplice commento in cui possiamo effettuare il check-out specifico su Dewes facendo clic e quindi facciamo in modo che funzioni.

17
00:01:00,780 --> 00:01:01,820
Iniziamo aggiungendo

18
00:01:02,010 --> 00:01:04,540
Quindi dobbiamo selezionare tutti gli alleati.

19
00:01:04,830 --> 00:01:11,020
Quindi tutto ciò che dobbiamo fare è alleare invece del simbolo del dollaro e poi faremo un clic.

20
00:01:12,150 --> 00:01:18,360
E quando clicchiamo qui è la funzione che vogliamo eseguire la funzione di callback e

21
00:01:18,360 --> 00:01:28,050
inizieremo con un semplice allerta cliccato alleato e torneremo indietro e assicurarci che quando aggiorniamo e clicchiamo su un alleato ci dice che abbiamo

22
00:01:28,050 --> 00:01:32,520
fatto clic su un alleato ma da nessun'altra parte ciò accade.

23
00:01:32,550 --> 00:01:34,260
Grande.

24
00:01:34,260 --> 00:01:39,930
proprietà color e trasformare il colore grigio e la proprietà di decorazione del testo e farla passare.

25
00:01:39,930 --> 00:01:47,050
Quindi lavoriamo sul cambiamento del singolo alleato su cui abbiamo fatto clic e cambiando il colore del colore e

26
00:01:47,150 --> 00:01:54,270
la barra o l'effetto di decorazione del testo piuttosto che avvisare cosa vogliamo fare è usare il metodo CSSA

27
00:01:54,290 --> 00:01:59,210
puntino e con quello vedremo SS. Stiamo andando a vuoi lavorare con la

28
00:01:59,690 --> 00:02:01,210
Iniziamo con il colore.

29
00:02:01,380 --> 00:02:05,090
Quindi sembrerebbe grigio di colore proprio così.

30
00:02:05,370 --> 00:02:09,610
E poi dobbiamo decidere cosa stiamo applicando a ciò che stiamo selezionando.

31
00:02:09,990 --> 00:02:15,180
E questo non è quello che vogliamo fare se selezioniamo semplicemente una bugia e ci facciamo più ghiotti.

32
00:02:15,210 --> 00:02:20,670
è un po 'difficile vedere se faccio qualcosa di più ovvio come il rosso quando clicco.

33
00:02:20,670 --> 00:02:24,000
Ora quando clicco, diventano tutti grigi e so che

34
00:02:24,060 --> 00:02:29,880
Diventano tutti rossi e non è ciò che vogliamo ciò che vogliamo, ma è solo quello su cui è stato fatto clic.

35
00:02:30,150 --> 00:02:34,410
Ed è qui che la parola chiave arriva con il wrapper J Querrey.

36
00:02:34,410 --> 00:02:40,260
Questo si riferisce alla menzogna specifica su cui è stato fatto clic e vogliamo cambiare solo quello che ci mostra in modo che

37
00:02:40,260 --> 00:02:41,460
il suo colore sia grigio.

38
00:02:41,760 --> 00:02:43,510
E lo metteremo alla prova.

39
00:02:43,560 --> 00:02:47,740
Ora clicco sull'alleato individuale e diventa grigio.

40
00:02:47,910 --> 00:02:51,000
Ovviamente non torna al nero quando clicco di nuovo.

41
00:02:51,030 --> 00:02:53,790
Non abbiamo quella funzionalità.

42
00:02:53,790 --> 00:02:59,370
Ora otteniamo la barratura con un effetto linea passante in modo che possiamo fare un'altra riga come questa.

43
00:02:59,370 --> 00:03:15,300
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

44
00:03:15,330 --> 00:03:18,200
un Prentis vedere qui.

45
00:03:20,070 --> 00:03:27,940
Ora quando clicchiamo otteniamo un effetto barrato e il colore diventa grigio.

46
00:03:29,610 --> 00:03:32,200
Ma ovviamente c'è sempre un modo più semplice per farlo.

47
00:03:32,220 --> 00:03:38,280
Quindi, piuttosto che farlo su due righe separate, potresti aver ricordato come potremmo definire

48
00:03:38,280 --> 00:03:43,100
l'oggetto con coppie di valori chiave e fare una sola chiamata CSSA.

49
00:03:43,290 --> 00:03:52,880
Quindi abbiamo aggiunto un oggetto qui proprio così e dobbiamo aggiungere una virgola di colore grigio.

50
00:03:53,280 --> 00:03:59,110
E questo è un po 'complicato se scriviamo la decorazione di Dasch nell'oggetto e impostiamo quella linea.

51
00:03:59,580 --> 00:04:05,520
E io risparmio e rinfresco vedi che non succede nulla.

52
00:04:05,530 --> 00:04:10,530
In realtà ottengono un errore perché in javascript Non è possibile avere nomi di proprietà che

53
00:04:10,530 --> 00:04:11,240
contengono trattini.

54
00:04:11,760 --> 00:04:19,410
Quindi, se stiamo usando la sintassi in cui definiamo un oggetto, abbiamo bisogno di usare una dichiarazione di testo sul caso cammello che

55
00:04:19,410 --> 00:04:20,890
sia sempre un po 'complicata.

56
00:04:20,940 --> 00:04:27,360
trova la decorazione del testo in modo tale proprietà CSSA e applica la linea e il colore grigio.

57
00:04:27,360 --> 00:04:30,290
E se siamo freschi Ora puoi vedere che

58
00:04:30,510 --> 00:04:35,510
La prossima cosa che potresti voler fare è tornare indietro al nero e sbarazzarti della linea

59
00:04:35,520 --> 00:04:36,540
con un clic.

60
00:04:37,460 --> 00:04:39,800
Per farlo useremo una semplice istruzione IF.

61
00:04:39,900 --> 00:04:45,600
Quindi controlleremo se Ally è grigio, altrimenti lo trasformeremo in

62
00:04:48,510 --> 00:04:49,020
nero,

63
00:04:51,670 --> 00:04:53,780
altrimenti diventerà grigio.

64
00:04:53,920 --> 00:05:00,820
Quindi per verificare se la bugia è grigia possiamo fare se e possiamo usare questa roba.

65
00:05:00,890 --> 00:05:13,150
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

66
00:05:13,870 --> 00:05:19,230
senza fornire un altro valore e questo recupererà il colore corrente.

67
00:05:19,620 --> 00:05:28,370
Quindi avremo una dichiarazione if se questo vedesse che il senso del colore è uguale al grigio.

68
00:05:29,410 --> 00:05:39,120
Facciamo solo un registro di concerti che al momento è grigio e questo è tutto per iniziare.

69
00:05:39,490 --> 00:05:41,790
Quindi puliamo un po 'questo e

70
00:05:47,310 --> 00:05:51,150
non ce l'abbiamo, altrimenti lo lasciamo com'è e torniamo indietro.

71
00:05:51,310 --> 00:05:58,170
Quindi, se aggiorniamo e apriamo la console e faccio clic su uno di questi, non ci dice ancora

72
00:05:58,180 --> 00:06:00,030
nulla perché non è grigio.

73
00:06:00,190 --> 00:06:03,230
Ma ora se clicco ancora non funziona ancora.

74
00:06:03,270 --> 00:06:05,420
E la ragione è un po 'complicata.

75
00:06:05,470 --> 00:06:06,930
Se torniamo qui.

76
00:06:07,180 --> 00:06:12,820
Diamo un'occhiata a ciò che fa il colore CSSA al di fuori dell'istruzione if.

77
00:06:12,910 --> 00:06:15,400
Quindi faremo una console che registra.

78
00:06:15,690 --> 00:06:19,760
Questo avvia il colore SS e aggiorna la pagina.

79
00:06:20,250 --> 00:06:25,230
E quando clicco vedrai che inizia come R. G. 000.

80
00:06:25,440 --> 00:06:31,750
nuovo, stiamo impostando il colore in grigio e pensiamo che sia grigio in questo momento se lo esaminiamo.

81
00:06:31,750 --> 00:06:33,270
E se clicco di

82
00:06:33,750 --> 00:06:40,100
Dice che il colore è grigio ma quando clicco di nuovo è in realtà il R. G. versione.

83
00:06:40,320 --> 00:06:45,550
Quindi, quando ci confrontiamo per verificare se il colore è uguale a Gray, non funzionerà.

84
00:06:45,670 --> 00:06:49,820
Dobbiamo confrontarlo con R. G. essere 1 2 8 1 2 8 1 2 8.

85
00:06:50,310 --> 00:06:57,840
E ora se proviamo questo e aggiorniamo dovremmo vedere quando clicco per la prima volta non clicco di nuovo.

86
00:06:58,090 --> 00:07:00,730
Ora dice che è attualmente grigio.

87
00:07:01,150 --> 00:07:01,460
OK.

88
00:07:01,480 --> 00:07:02,710
Quindi possiamo usarlo.

89
00:07:03,030 --> 00:07:05,710
Quindi, invece di limitarsi a stampare, è attualmente grigio.

90
00:07:05,920 --> 00:07:08,070
Quello che vogliamo fare è girarlo in nero.

91
00:07:08,130 --> 00:07:15,950
Quindi faremo una cosa che ci vedrà a colori e torneremo al nero.

92
00:07:16,120 --> 00:07:16,930
Proprio così.

93
00:07:17,110 --> 00:07:20,670
E poi possiamo gestire la decorazione del testo in un secondo.

94
00:07:20,980 --> 00:07:24,240
Quindi aggiorniamo e clicchiamo e diventiamo grigi.

95
00:07:24,420 --> 00:07:26,660
E se clicco ancora, non funzionerà ancora.

96
00:07:26,840 --> 00:07:29,650
E questo perché lo stiamo solo sovrascrivendo alla fine qui.

97
00:07:29,710 --> 00:07:31,870
Lo stiamo facendo diventare grigio ogni volta.

98
00:07:31,960 --> 00:07:39,210
Quindi vogliamo spostarlo nel nostro altro, quindi aggiungeremo un'altra istruzione qui e lo faremo solo se al

99
00:07:39,270 --> 00:07:41,060
momento non è Gray.

100
00:07:41,740 --> 00:07:42,220
Tutto ok.

101
00:07:42,390 --> 00:07:43,260
Quindi dovremmo essere bravi.

102
00:07:43,260 --> 00:07:50,400
Ora spostiamo questo commento qui ripuliamo le cose un po 'e aggiorniamo.

103
00:07:50,640 --> 00:07:54,490
Facciamo clic e diventa grigio, cuoce nuovamente, torna al nero.

104
00:07:54,550 --> 00:07:58,110
Abbiamo ancora la linea, ma almeno il colore sta cambiando.

105
00:07:58,420 --> 00:08:05,870
Quindi per sbarazzarci della linea tutto ciò che dobbiamo fare è semplicemente copiare questo o rifare un oggetto.

106
00:08:06,780 --> 00:08:10,460
E invece di impostare il colore come grigio, lo renderemo nero.

107
00:08:10,840 --> 00:08:15,560
E piuttosto che la decorazione del testo da sfogliare, lo imposteremo come none.

108
00:08:15,900 --> 00:08:23,950
E ora, se fossimo freschi e reali, stiamo attivando e disattivando il punto in cui abbiamo il grigio

109
00:08:23,950 --> 00:08:25,390
e la linea.

110
00:08:26,010 --> 00:08:31,260
Spero che mentre stiamo affrontando questo si vede che è un sacco di lavoro per fare questo controllo.

111
00:08:31,650 --> 00:08:33,230
È attualmente grigio.

112
00:08:33,250 --> 00:08:39,580
RGV 128 128 128 se lo è, lo renderemo nero e rimuovere la decorazione del testo.

113
00:08:39,700 --> 00:08:41,310
Altrimenti fai questo.

114
00:08:41,490 --> 00:08:46,020
C'è un modo molto più semplice per cui non dobbiamo effettivamente fare nessuna di queste logiche.

115
00:08:46,450 --> 00:08:54,460
Quello che possiamo fare è creare una classe in modo da creare una classe nelle nostre C S

116
00:08:54,460 --> 00:08:59,630
e la chiameremo completata o appena completata e il colore sarà grigio.

117
00:08:59,800 --> 00:09:00,890
Non abbiamo bisogno di quelle citazioni.

118
00:09:01,000 --> 00:09:08,980
Non siamo in javascript e la decorazione del testo sarà una linea attraverso e salvare e quindi lo faremo.

119
00:09:09,140 --> 00:09:20,310
codice e tutto è stato cancellato e tutto ciò che vogliamo fare è questa linea di puntamento abilitata alla linea

120
00:09:20,320 --> 00:09:20,890
singola.

121
00:09:23,700 --> 00:09:27,240
Sì, possiamo davvero sostituire tutto questo

122
00:09:27,490 --> 00:09:33,960
Quindi, quando clicchiamo su un alleato, attiveremo la classe sulla diapositiva che abbiamo cliccato sulla classe

123
00:09:33,970 --> 00:09:40,510
completata e che la renderà grigia e gli darà un effetto linea passante e manterrà traccia

124
00:09:40,500 --> 00:09:43,980
di se è necessario rimuoverla o aggiunto automaticamente.

125
00:09:44,380 --> 00:09:48,240
Quindi puoi vedere qui sembra esattamente lo stesso come prima.

126
00:09:48,370 --> 00:09:54,700
Ma dovevamo solo scrivere una riga di codice piuttosto che una decina di righe e il prossimo video parlerà di come

127
00:09:54,690 --> 00:09:57,490
possiamo effettivamente ottenere la X per portarla a fare