1
00:00:00,380 --> 00:00:05,190
OK we komen terug op de X-knop hier te komen de volgende eigenschap die ik wil aan te pakken is.

2
00:00:05,190 --> 00:00:14,060
Dus toen we op deze X moet eigenlijk compleet verwijderen Om dit te doen niet alleen grijs, maar het zou eigenlijk fade-out en te verwijderen.

3
00:00:14,190 --> 00:00:16,530
Dus het ziet er als volgt uit over de definitieve versie.

4
00:00:16,710 --> 00:00:24,890
We hebben niet hetzelfde pictogram te klikken op in dezelfde kleuren of de animatie, maar de functionaliteit als ik klik op iets moet hetzelfde zijn.

5
00:00:24,930 --> 00:00:28,100
Dus laten we zeggen dat ik klaar ben met gerechten.

6
00:00:28,440 --> 00:00:30,400
Het vervaagt en verdwijnt dan.

7
00:00:30,450 --> 00:00:33,010
En het is niet meer hier is het helemaal weg.

8
00:00:33,320 --> 00:00:34,250
OK.

9
00:00:34,590 --> 00:00:39,350
Het eerste wat we willen doen is luisteren voor een klik op een van deze exen.

10
00:00:39,660 --> 00:00:45,460
En in onze tijd Tim zal ik onthouden dat we elk een spanwijdte, zodat we gemakkelijk dat kunnen doen.

11
00:00:45,690 --> 00:00:54,140
Anders als we hadden net een X als onderdeel van de leugen is er geen manier om te bepalen of onze klik is op de X of als het op de rest van de weg.

12
00:00:54,150 --> 00:01:00,680
Dus we er geweest en nu gaan we naar een javascript en laten we toe te voegen in een andere reactie.

13
00:01:00,960 --> 00:01:08,330
Klik op X om te verwijderen om te doen dus we zullen beginnen met de gebeurtenis click.

14
00:01:08,760 --> 00:01:10,740
Dus dollarteken.

15
00:01:10,770 --> 00:01:35,200
Selecteer alle spand En u klikt opnieuw en dan hebben we behoefte aan een callback functie en in plaats van ons callback we gewoon nog een klik op een overspanning net als dat en we komen terug gaan vernieuwen klikken we op de leugen er gebeurt niets.

16
00:01:35,340 --> 00:01:39,840
Zodra we op de overspanning krijgen we een waarschuwing die zegt dat je hebt geklikt op deze overspanning.

17
00:01:39,840 --> 00:01:52,690
Er is een klein probleem dat je misschien nog niet opgevallen toen ik op de overspanning klikken en klik vervolgens op de X krijg ik de melding dat ik verwacht te krijgen, maar ook aandacht schenken als ik de waarschuwing verworpen.

18
00:01:53,190 --> 00:01:57,380
We krijgen ook de stijlen die afkomstig zijn uit de klik evenement.

19
00:01:57,840 --> 00:02:05,500
Dus wat dat ons vertelt, is dat de spam evenement wordt afvuren en dan daarna de ly gebeurtenis click wordt afvuren ook.

20
00:02:05,730 --> 00:02:11,480
En dat doet zinvol omdat onze overspanningen zijn binnenkant van de bondgenoten.

21
00:02:11,730 --> 00:02:25,680
Dus toen we op een overspanning toen ik op deze overspanning bijvoorbeeld in het midden klik laten inspecteren Ik ben te klikken op deze overspanning maar dat is ook de Spaanse in de bondgenoot.

22
00:02:25,830 --> 00:02:29,370
Dus vanuit een ander perspectief Ik ben te klikken op de leugen.

23
00:02:29,620 --> 00:02:48,640
Maar vanuit een ander perspectief Ik ben te klikken op de goed ook, want al deze zijn in plaats van een UL of op de div id container of op het lichaam of op het team element dat een klik op deze overspanning gaat door je kent vijf of zes verschillende lagen.

24
00:02:48,660 --> 00:02:55,790
Dus toen we in event listener toe te voegen aan de overspanning of om de bondgenoot of als we hadden een evenement luisteraar en alle van hen, die ik je nu zal je laten zien.

25
00:02:55,920 --> 00:03:07,990
Dus laten we hier toevoegen nog een event listener en deze zal op de wil en we zullen gewoon-waarschuwing geklikt UIL en zal men meer te doen.

26
00:03:08,280 --> 00:03:19,560
En deze zal op de divx ID container en dit zal zeggen op container div en eigenlijk zal het doen op het lichaam ook.

27
00:03:19,560 --> 00:03:22,510
En dit zal zeggen op het lichaam.

28
00:03:22,740 --> 00:03:23,410
OK.

29
00:03:23,430 --> 00:03:30,510
Dus klikken we op de overspanning die in plaats van een bondgenoot in plaats van een UL plaats van de houder binnenkant van het lichaam.

30
00:03:30,510 --> 00:03:34,530
Laten we nu eens aandacht besteden als we vernieuwen om de orde dat de dingen in brand.

31
00:03:34,590 --> 00:03:47,090
Dus eerst Ik klik op de overspanning en het vertelt me ​​klikte op de overspanning en dan heb ik weet niet of je opgevallen, maar de gebeurtenis click vuur dat doet goed, dat is hoe we de stijlen daar.

32
00:03:47,340 --> 00:03:53,060
En dan is het goed klikt gebeurtenis dan de container div en dan is het lichaam uiteindelijk.

33
00:03:53,340 --> 00:03:56,980
Zodat voorbeeld illustreert een verschijnsel genaamd event borrelen.

34
00:03:57,030 --> 00:04:02,290
Wat er gebeurt is dit evenement voor het eerst wordt geactiveerd op de overspanning en dat is waar het afkomstig is.

35
00:04:02,400 --> 00:04:05,130
Maar dan borrelt het in twee bovenliggende elementen.

36
00:04:05,130 --> 00:04:20,830
Het borrelt zo omhoog in de leugen en het zal elke zoals klikgebeurtenissen activeren en vervolgens van daaruit borrelt aan de blik naar de put die zal leiden tot elke goed klikt evenement en zo verder tot het raakt de HTL element waar het stopt om te voorkomen dat liggen.

37
00:04:20,850 --> 00:04:25,840
Klik handler van triggering toen we op de overspanning die zich in de Y.

38
00:04:25,860 --> 00:04:31,250
Wat we wel kunnen doen is het evenement binnenkant van de overspanning niet bubble eigenlijk niet meer te vertellen.

39
00:04:31,440 --> 00:04:36,920
Gewoon om te stoppen in zijn tracks en andere evenementen op bovenliggende element niet geactiveerd.

40
00:04:37,050 --> 00:04:38,600
Dus ik zal je dat hier laten zien.

41
00:04:38,960 --> 00:04:44,220
Alle we moeten doen in plaats van deze overspanning snel luisteraar voegen we in het geval object.

42
00:04:44,220 --> 00:04:48,210
En ook dit kan E event T. worden genoemd

43
00:04:48,420 --> 00:04:51,720
Elke naam die u wilt dat de meest voorkomende is gebeurtenis of e.

44
00:04:51,900 --> 00:04:59,110
En wat we zullen doen is het toevoegen van een methode genaamd evenement stop voortplanting.

45
00:04:59,790 --> 00:05:04,050
Dit is een J coderingswerkwijze dat geval zal stoppen opborrelen.

46
00:05:04,050 --> 00:05:10,940
Zo zal het vuur op de overspanning, maar het zal niet verder op dergelijke luisteraar of een van deze die we hebben voor die kwestie.

47
00:05:11,310 --> 00:05:13,620
Dus als we op te slaan en te vernieuwen.

48
00:05:14,090 --> 00:05:20,210
En nu heb ik op een overspanning ik nog steeds mijn klikte op de overspanning en dan stopt het.

49
00:05:20,250 --> 00:05:26,970
We hebben geen van die andere luisteraars die we hadden opgezet afvuren een ander we hebben de overspanning luisteraar correct ingesteld te krijgen.

50
00:05:27,060 --> 00:05:29,560
Laten we vul het in met de juiste code.

51
00:05:29,940 --> 00:05:36,170
Wat we moesten doen is wanneer we op een overspanning Ik kom terug naar de browser gaan wanneer we op een van deze.

52
00:05:36,330 --> 00:05:44,460
We willen deze leugen te verwijderen, zodat de leugen dat bevat het kan vernieuwen.

53
00:05:44,850 --> 00:05:58,810
Ik klik op deze overspanning het nodig heeft om deze leugen te verwijderen en te doen dat we kunnen starten vanaf de overspanning met behulp van dollarteken dit en als we gewoon dollars doen op deze verwijderen of fade-out, maar we beginnen met verwijderen.

54
00:05:59,790 --> 00:06:01,780
En we gaan terug.

55
00:06:02,190 --> 00:06:05,220
Alles wat er gebeurt, is dat de overspanning verdwijnt.

56
00:06:05,220 --> 00:06:08,020
We op dit moment zijn het verwijderen van de overspanning.

57
00:06:08,130 --> 00:06:14,000
We moeten de omsluitende element te verwijderen en Shakeri geeft ons echt een leuke en eenvoudige manier om dat te doen.

58
00:06:14,040 --> 00:06:24,120
Alles wat we moeten doen is dit schrijf ouders te verwijderen en dat ook daadwerkelijk ons ​​de bovenliggende element als een query-element.

59
00:06:24,120 --> 00:06:32,940
Dus dit is een overspanning dat we geklikt ouder geeft ons de leugen verwijderen wordt de gehele bondgenoot te verwijderen.

60
00:06:33,120 --> 00:06:39,500
Dus nu als ik refresh je kunt zien verdwijnt en weer te vernieuwen.

61
00:06:39,500 --> 00:06:47,500
Maar als ik op de vlieg klik controleert vlak bij de laatste verbetering die we kunnen maken is in plaats van het onmiddellijk verwijderen.

62
00:06:47,750 --> 00:06:48,770
Het is vervaagd.

63
00:06:49,140 --> 00:06:59,510
Dus we doen een dot fade-out en beginnen weer terug te gaan vernieuwen we klikken en het verdwijnt.

64
00:07:00,090 --> 00:07:03,530
Maar vergeet gewoon montage it out niet daadwerkelijk verwijderen.

65
00:07:03,570 --> 00:07:10,810
Het is nog steeds hier als we inspecteren in plaats van onze je goed we hebben nog drie te doen is slechts twee van hen hebben geen weergave.

66
00:07:11,130 --> 00:07:12,660
En we willen niet dat dat gebeurt.

67
00:07:12,660 --> 00:07:15,470
Stel je voor dat we een duizend te verliezen dat we hadden verwijderd.

68
00:07:15,720 --> 00:07:20,240
Nou we willen niet om dingen te vertragen door het hebben van meer dan duizend verborgen elementen op de pagina.

69
00:07:20,250 --> 00:07:26,820
Dus wat we zullen doen in plaats daarvan is het gebruik te verwijderen, maar vergeet niet het niet alleen werkt om dit te doen.

70
00:07:26,820 --> 00:07:30,770
Het zal het te verwijderen, maar het zal niet wachten tot de fade out tot eind.

71
00:07:30,900 --> 00:07:51,580
Als we willen zo snel laten zien dat we op het begint te vervagen en dan onmiddellijk na het verwijdert als we willen dat de fade-out om alles wat we moeten doen eindigen is gebruik maken van de callback we kunnen overgaan in fadeout die nadien zal draaien.

72
00:07:51,690 --> 00:07:56,820
En laten we het eens te duur en laten we zeggen vijfhonderd milliseconden om te beginnen.

73
00:07:57,180 --> 00:08:00,680
En toen het klaar is kunnen we niet gewoon bellen te verwijderen op zijn eigen.

74
00:08:00,720 --> 00:08:09,320
We moeten het doen op een element en het element we het willen noemen on is dezelfde die we invullen, zodat we een dollarteken kan gebruiken.

75
00:08:09,420 --> 00:08:18,940
Dit is belangrijk om op te merken dat dit recht is hier niet hetzelfde dollarteken dit recht hier.

76
00:08:19,470 --> 00:08:24,330
Dus laten we lopen door dat het een beetje ingewikkeld wanneer we klikken op een Spaans dollarteken.

77
00:08:24,330 --> 00:08:30,410
Dit verwijst naar het element dat snel op de overspanning was, maar dan zijn we ouder doen.

78
00:08:30,600 --> 00:08:37,720
Dus nu zijn we samen met de leugen dat die spanwijdte omsluit en dan zijn we fadeout doen op de vlieg.

79
00:08:37,800 --> 00:08:43,080
Dus in plaats van fade out dit verwijst naar de leugen niet de overspanning.

80
00:08:43,590 --> 00:08:47,470
OK dus we zullen slaan en terug te gaan vernieuwen.

81
00:08:47,730 --> 00:08:54,700
Nu krijgen we een mooie fade out en als we inspecteren de UL we maar één leven links.

82
00:08:55,110 --> 00:08:57,600
Dus het vervaagt en vervolgens verwijdert.

83
00:08:57,810 --> 00:08:59,610
Om alles hier samen te vatten.

84
00:08:59,610 --> 00:09:09,610
Het eerste probleem dat we tegenkwamen was dat onze events de klik evenement op de overspanning was eigenlijk het afvuren van de gebeurtenis op de vlieg en nadat het in brand gestoken de spanwijdte van het.

85
00:09:10,110 --> 00:09:15,540
Dus om vast te stellen dat we gebruikten geval dat vermeerdering die het stopt uit borrelen tot andere elementen te stoppen.

86
00:09:15,780 --> 00:09:23,750
En dan gebruikten we die ouder naar de bondgenoot die bijvoeging van de overspanning die werd geklikt op te halen en vervolgens verdween we het uit.