1
00:00:00,330 --> 00:00:00,660
Okee.

2
00:00:00,650 --> 00:00:01,490
Welkom terug.

3
00:00:01,680 --> 00:00:06,210
En deze video gaan we beginnen met het aanpakken van enkele van de basisfunctionaliteit van onze lijst.

4
00:00:06,210 --> 00:00:16,380
We gaan beginnen leuk en makkelijk door het toevoegen van de snelle luisteraars aan de bondgenoten, zodat wanneer we klikken krijgen we een beetje doorhalen effect dat je hier kunt zien en ze GREA uit.

5
00:00:16,890 --> 00:00:20,750
En voordat we dat doen, dat ik ben eigenlijk van plan om onze achtergrond een beetje aanpassen.

6
00:00:21,000 --> 00:00:22,910
Ik ga om zich te ontdoen van die achtergrond.

7
00:00:23,190 --> 00:00:25,020
En dan ga ik een rand in plaats daarvan toe te voegen.

8
00:00:25,200 --> 00:00:35,800
Dus onze grens zullen twee pixel effen grijs slechts een kleine verandering, maar het zal het zo maken dat het makkelijker is om te zien wanneer we deze grijs.

9
00:00:35,880 --> 00:00:39,170
Als we hadden een geweldige achtergrond dan zou het gewoon helemaal opgaan in.

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

11
00:00:40,200 --> 00:00:48,190
Dus wat we willen dat er gebeurt is wanneer we op een bondgenoot van de tekst in het oog is grijs en we voegen een doorhaling effect.

12
00:00:48,570 --> 00:00:50,930
Dus laten we naar onze javascript bestand.

13
00:00:51,210 --> 00:01:01,820
Laten we beginnen met het toevoegen van een eenvoudige reactie waar we kunnen afvinken specifiek voor Dewes door te klikken en dan laten we dat werk.

14
00:01:02,010 --> 00:01:04,540
Dus moeten we alle bondgenoten te selecteren.

15
00:01:04,830 --> 00:01:11,020
Dus alles wat we moeten doen is bondgenoot in plaats van het dollarteken en dan zullen we een klik doen.

16
00:01:12,150 --> 00:01:32,520
En als we klik hier is de functie die we willen de callback functie uitvoeren en we beginnen met gewoon een leuke alert geklikt bondgenoot en terug te gaan en ervoor te zorgen dat wanneer we vernieuwen en klik op een bondgenoot het vertelt ons dat we klikte een bondgenoot maar nergens anders gebeurt dat.

17
00:01:32,550 --> 00:01:34,260
Grote.

18
00:01:34,260 --> 00:01:59,210
Next up Laten we werken aan het veranderen van de individuele bondgenoot die we geklikt en het veranderen van de kleur en de doorhaling of de tekst decoratie effect in plaats van te waarschuwen wat we willen doen is gebruik maken van de stip CSSA methode en dat zie SS We gaan willen werken met de eigenschap kleur en draai de kleuren grijs en de inrichting eigendom tekst en maak die lijn door.

19
00:01:59,690 --> 00:02:01,210
Laten we beginnen met de kleur.

20
00:02:01,380 --> 00:02:05,090
Dus het eruit zou zien kleur grijs, net als dat.

21
00:02:05,370 --> 00:02:09,610
En dan moeten we beslissen wat passen we die aan wat zijn we selecteren.

22
00:02:09,990 --> 00:02:15,180
En dit is niet wat we willen doen als we gewoon een leugen te selecteren en doe gutsiest ons.

23
00:02:15,210 --> 00:02:24,000
Nu wanneer ik op dat ze allemaal draaien grijs en ik weet dat het een beetje moeilijk om te zien of ik dat er iets meer voor de hand liggende zoals rood als ik klik.

24
00:02:24,060 --> 00:02:29,880
Ze zijn allemaal rood dat is niet wat we willen wat we willen in plaats daarvan is slechts degene die is geklikt.

25
00:02:30,150 --> 00:02:34,410
En dat is waar het sleutelwoord deze komt binnen met de J Querrey wrapper.

26
00:02:34,410 --> 00:02:41,460
Dit verwijst naar de specifieke leugen dat is geklikt en we willen alleen veranderen dat men ons Seus zodat de kleur is grijs.

27
00:02:41,760 --> 00:02:43,510
En we zullen testen of buiten.

28
00:02:43,560 --> 00:02:47,740
Nu klik ik op het individu bondgenoot en het blijkt grijs.

29
00:02:47,910 --> 00:02:51,000
Natuurlijk is het niet terug naar zwart worden wanneer ik weer op.

30
00:02:51,030 --> 00:02:53,790
We hebben dat niet functionaliteit.

31
00:02:53,790 --> 00:02:59,370
Nu laten we het doorhalen met een streep erdoor effect, zodat we een andere lijn als dit kan doen.

32
00:02:59,370 --> 00:03:18,200
Dit doet SEUS ons en vervolgens tekst decoratie colon of komma lijn dash door en op te slaan en terug te gaan missen van een Prentis zie hier.

33
00:03:20,070 --> 00:03:27,940
Nu wanneer we klikken krijgen we een doorhaling effect daar en verandert de kleur naar grijs.

34
00:03:29,610 --> 00:03:32,200
Maar natuurlijk is er altijd een eenvoudiger manier om dat te doen.

35
00:03:32,220 --> 00:03:43,100
Dus in plaats van het doen van het op twee afzonderlijke lijnen die je zou kunnen hebben herinnerde zich hoe we object kan omschrijven met de belangrijkste waarde paren en gewoon doen een enkele dit CSSA gesprek.

36
00:03:43,290 --> 00:03:52,880
Dus moesten we voegen een object in hier net als dat en we moeten toe te voegen in de kleur grijs komma.

37
00:03:53,280 --> 00:03:59,300
En dit is een beetje lastig als we dat doen tekst Dasch decoratie in het object en stel dat voor lijn door te zijn.

38
00:03:59,580 --> 00:04:05,520
En ik spaar en verfrissen je ziet er niets gebeurt.

39
00:04:05,530 --> 00:04:11,240
Zij krijgen eigenlijk een fout omdat in javascript U kunt geen eigendom namen die koppeltekens in hen hebben.

40
00:04:11,760 --> 00:04:20,890
Dus als we met behulp van de syntaxis, waar we een object te definiëren moeten we tekst verklaring kameel zaak die is altijd een beetje lastig te gebruiken.

41
00:04:20,940 --> 00:04:30,290
En als we zijn fris Nu kunt u zien dat het van oordeel is dat de tekst decoratie zo CSSA pand en het past de lijn door en de grijze kleur.

42
00:04:30,510 --> 00:04:36,540
Het volgende wat je zou willen doen is zet hem weer naar zwart en zich te weer ontdoen van de lijn door één klik.

43
00:04:37,460 --> 00:04:39,800
Om dit te doen dat we een eenvoudige IF statement zult gebruiken.

44
00:04:39,900 --> 00:04:53,780
Dus we zullen controleren of Ally grijs is dan zullen we te zetten zwarte anders zet het grijs.

45
00:04:53,920 --> 00:05:00,820
Dus om te controleren of de leugen grijs is wat we kunnen doen, indien en kunnen we dit spul gebruiken.

46
00:05:00,890 --> 00:05:19,230
SS En als we het net als dit, dus als om te controleren of een bondgenoot is grijs we kunnen dit punt C Ss daadwerkelijk te gebruiken en vragen het voor kleur zonder dat een andere waarde en dat de huidige kleur zal halen.

47
00:05:19,620 --> 00:05:28,370
Dus we een if-statement hebben als dit doet zie je een gevoel voor kleur gelijk naar grijs is.

48
00:05:29,410 --> 00:05:39,120
Laten we gewoon een concert log is momenteel grijs en dat is allemaal te wijten aan beginnen.

49
00:05:39,490 --> 00:05:51,150
Dus laten we dit opruimen een beetje en we niet hebben of nog anders dus we zullen laat het gewoon hoe het is en ga terug.

50
00:05:51,310 --> 00:06:00,030
Dus als we vernieuwen en we openstellen van de console en ik klik op een van deze het niet met ons nog iets vertellen, want het is niet grijs.

51
00:06:00,190 --> 00:06:03,230
Maar nu als ik weer op het nog steeds niet werkt.

52
00:06:03,270 --> 00:06:05,420
En de reden daarvoor is een beetje lastig.

53
00:06:05,470 --> 00:06:06,930
Als we hier terug.

54
00:06:07,180 --> 00:06:12,820
Laten we eens een kijkje nemen op wat dit doet CSSA kleur is buiten de if-statement.

55
00:06:12,910 --> 00:06:15,400
Dus we een console die log te doen.

56
00:06:15,690 --> 00:06:19,760
Dit begint de SS kleur en vernieuw de pagina.

57
00:06:20,250 --> 00:06:25,230
En als ik klik je zult zien dat het begint als R.G. 000.

58
00:06:25,440 --> 00:06:33,270
En als ik klik nogmaals we het instellen van de kleur grijs te zijn en we denken dat het grijs nu als we geïnspecteerd.

59
00:06:33,750 --> 00:06:40,100
Het zegt dat de kleur is grijs, maar wanneer ik weer op het eigenlijk de R.G. versie.

60
00:06:40,320 --> 00:06:45,550
Dus als we het vergelijken om te controleren of de kleur is gelijk aan Gray dat gaat niet werken.

61
00:06:45,670 --> 00:06:49,820
We moeten om het te vergelijken met R.G. zijn 1 2 8 1 2 8 1 2 8.

62
00:06:50,310 --> 00:06:57,840
En nu als we proberen dit en vernieuwen we moeten zien toen ik op de eerste keer dat ik niets klik nogmaals.

63
00:06:58,090 --> 00:07:00,730
Het zegt nu is het nog grijs.

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

65
00:07:01,480 --> 00:07:02,710
Dus we kunnen gebruiken.

66
00:07:03,030 --> 00:07:05,710
Dus in plaats van gewoon bedrukt is momenteel Gray.

67
00:07:05,920 --> 00:07:08,070
Wat wij willen doen is zet hem zwart.

68
00:07:08,130 --> 00:07:15,950
Dus we een dit dat ons zien kleur te doen en we zullen gewoon terug naar zwart.

69
00:07:16,120 --> 00:07:16,930
Gewoon zo.

70
00:07:17,110 --> 00:07:20,670
En dan kunnen we omgaan met de tekst decoratie in slechts een seconde.

71
00:07:20,980 --> 00:07:24,240
Dus we vernieuwen en we klikken en krijgen we grijs.

72
00:07:24,420 --> 00:07:26,660
En als ik weer op het zal nog niet werken.

73
00:07:26,840 --> 00:07:29,650
En dat komt omdat we nog maar net overschrijven op het einde hier.

74
00:07:29,710 --> 00:07:31,870
We draaien grijs elke keer.

75
00:07:31,960 --> 00:07:41,060
Dus we willen verhuizen die in ons anders, zodat we een else hier zullen toevoegen en we zullen dit alleen doen als het op dit moment niet Gray.

76
00:07:41,740 --> 00:07:42,220
Okee.

77
00:07:42,390 --> 00:07:43,260
Dus moeten we goed zijn.

78
00:07:43,260 --> 00:07:50,400
Nu gaan we gewoon dit commentaar hier schone dingen een beetje en te vernieuwen.

79
00:07:50,640 --> 00:07:54,490
We klikken blijkt grijze kok weer gaat het terug naar zwart.

80
00:07:54,550 --> 00:07:58,110
We hebben nog steeds de lijn door, maar in ieder geval de kleur verandert.

81
00:07:58,420 --> 00:08:05,870
Dus om zich te ontdoen van de lijn door alles wat we moeten doen, is dit in principe te kopiëren of opnieuw een object.

82
00:08:06,780 --> 00:08:10,460
En in plaats van het instellen van kleur grijs zijn we het zwart te maken.

83
00:08:10,840 --> 00:08:15,560
En in plaats van tekst decoratie aan lijn door middel we het zal ingesteld op het niet zijn.

84
00:08:15,900 --> 00:08:25,390
En nu als we waren vers en echt snel we schakelen dat gedaan op en af ​​waar we de grijze en de lijn door.

85
00:08:26,010 --> 00:08:31,560
Hopelijk als we gaan door middel van deze je ziet dat het een soort van een hoop werk om deze controle te doen.

86
00:08:31,650 --> 00:08:33,230
Is het momenteel Gray.

87
00:08:33,250 --> 00:08:39,580
RGV 128 128 128 als het dan we het zwart te maken en verwijder de tekst decoratie.

88
00:08:39,700 --> 00:08:41,310
dit anders te doen.

89
00:08:41,490 --> 00:08:46,020
Er is een veel gemakkelijkere manier dat we niet aan een van deze logica eigenlijk doen.

90
00:08:46,450 --> 00:08:59,630
Wat we wel kunnen doen is een klasse, dus we een klasse in onze C Ss gaat maken en we noemen het voltooid of net afgerond en het zal moeten kleur is grijs.

91
00:08:59,800 --> 00:09:00,890
Wij hebben geen die citaten nodig hebben.

92
00:09:01,000 --> 00:09:09,070
We zijn niet in Javascript en de tekst decoratie zal een lijn door te zijn en op te slaan en vervolgens zijn om dat te doen.

93
00:09:09,140 --> 00:09:27,240
Ja, we kunnen eigenlijk alles van deze code te vervangen en het schrapte alle en alles wat we willen doen is dit dot toggle klasse voltooid enkele lijn.

94
00:09:27,490 --> 00:09:43,980
Dus toen we op een bondgenoot we gaan naar de klas op de dia die we klikte op de klasse voltooide omgeschakeld en dat zal het grijs te maken en geef het een lijn door effect en het zal bijhouden als het nodig om het te verwijderen of automatisch toegevoegd.

95
00:09:44,380 --> 00:09:48,240
Zodat je hier kunt zien het ziet er precies hetzelfde als voorheen.