Okee.
Welkom terug.
En deze video gaan we beginnen met het aanpakken van enkele van de basisfunctionaliteit van onze lijst.
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.
En voordat we dat doen, dat ik ben eigenlijk van plan om onze achtergrond een beetje aanpassen.
Ik ga om zich te ontdoen van die achtergrond.
En dan ga ik een rand in plaats daarvan toe te voegen.
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.
Als we hadden een geweldige achtergrond dan zou het gewoon helemaal opgaan in.
OK.
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.
Dus laten we naar onze javascript bestand.
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.
Dus moeten we alle bondgenoten te selecteren.
Dus alles wat we moeten doen is bondgenoot in plaats van het dollarteken en dan zullen we een klik doen.
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.
Grote.
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.
Laten we beginnen met de kleur.
Dus het eruit zou zien kleur grijs, net als dat.
En dan moeten we beslissen wat passen we die aan wat zijn we selecteren.
En dit is niet wat we willen doen als we gewoon een leugen te selecteren en doe gutsiest ons.
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.
Ze zijn allemaal rood dat is niet wat we willen wat we willen in plaats daarvan is slechts degene die is geklikt.
En dat is waar het sleutelwoord deze komt binnen met de J Querrey wrapper.
Dit verwijst naar de specifieke leugen dat is geklikt en we willen alleen veranderen dat men ons Seus zodat de kleur is grijs.
En we zullen testen of buiten.
Nu klik ik op het individu bondgenoot en het blijkt grijs.
Natuurlijk is het niet terug naar zwart worden wanneer ik weer op.
We hebben dat niet functionaliteit.
Nu laten we het doorhalen met een streep erdoor effect, zodat we een andere lijn als dit kan doen.
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.
Nu wanneer we klikken krijgen we een doorhaling effect daar en verandert de kleur naar grijs.
Maar natuurlijk is er altijd een eenvoudiger manier om dat te doen.
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.
Dus moesten we voegen een object in hier net als dat en we moeten toe te voegen in de kleur grijs komma.
En dit is een beetje lastig als we dat doen tekst Dasch decoratie in het object en stel dat voor lijn door te zijn.
En ik spaar en verfrissen je ziet er niets gebeurt.
Zij krijgen eigenlijk een fout omdat in javascript U kunt geen eigendom namen die koppeltekens in hen hebben.
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.
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.
Het volgende wat je zou willen doen is zet hem weer naar zwart en zich te weer ontdoen van de lijn door één klik.
Om dit te doen dat we een eenvoudige IF statement zult gebruiken.
Dus we zullen controleren of Ally grijs is dan zullen we te zetten zwarte anders zet het grijs.
Dus om te controleren of de leugen grijs is wat we kunnen doen, indien en kunnen we dit spul gebruiken.
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.
Dus we een if-statement hebben als dit doet zie je een gevoel voor kleur gelijk naar grijs is.
Laten we gewoon een concert log is momenteel grijs en dat is allemaal te wijten aan beginnen.
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.
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.
Maar nu als ik weer op het nog steeds niet werkt.
En de reden daarvoor is een beetje lastig.
Als we hier terug.
Laten we eens een kijkje nemen op wat dit doet CSSA kleur is buiten de if-statement.
Dus we een console die log te doen.
Dit begint de SS kleur en vernieuw de pagina.
En als ik klik je zult zien dat het begint als R.G. 000.
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.
Het zegt dat de kleur is grijs, maar wanneer ik weer op het eigenlijk de R.G. versie.
Dus als we het vergelijken om te controleren of de kleur is gelijk aan Gray dat gaat niet werken.
We moeten om het te vergelijken met R.G. zijn 1 2 8 1 2 8 1 2 8.
En nu als we proberen dit en vernieuwen we moeten zien toen ik op de eerste keer dat ik niets klik nogmaals.
Het zegt nu is het nog grijs.
OK.
Dus we kunnen gebruiken.
Dus in plaats van gewoon bedrukt is momenteel Gray.
Wat wij willen doen is zet hem zwart.
Dus we een dit dat ons zien kleur te doen en we zullen gewoon terug naar zwart.
Gewoon zo.
En dan kunnen we omgaan met de tekst decoratie in slechts een seconde.
Dus we vernieuwen en we klikken en krijgen we grijs.
En als ik weer op het zal nog niet werken.
En dat komt omdat we nog maar net overschrijven op het einde hier.
We draaien grijs elke keer.
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.
Okee.
Dus moeten we goed zijn.
Nu gaan we gewoon dit commentaar hier schone dingen een beetje en te vernieuwen.
We klikken blijkt grijze kok weer gaat het terug naar zwart.
We hebben nog steeds de lijn door, maar in ieder geval de kleur verandert.
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.
En in plaats van het instellen van kleur grijs zijn we het zwart te maken.
En in plaats van tekst decoratie aan lijn door middel we het zal ingesteld op het niet zijn.
En nu als we waren vers en echt snel we schakelen dat gedaan op en af ​​waar we de grijze en de lijn door.
Hopelijk als we gaan door middel van deze je ziet dat het een soort van een hoop werk om deze controle te doen.
Is het momenteel Gray.
RGV 128 128 128 als het dan we het zwart te maken en verwijder de tekst decoratie.
dit anders te doen.
Er is een veel gemakkelijkere manier dat we niet aan een van deze logica eigenlijk doen.
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.
Wij hebben geen die citaten nodig hebben.
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.
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.
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.
Zodat je hier kunt zien het ziet er precies hetzelfde als voorheen.