1 00:00:00,330 --> 00:00:00,660 D'accord. 2 00:00:00,650 --> 00:00:01,490 Nous saluons le retour. 3 00:00:01,680 --> 00:00:06,210 Et cette vidéo, nous allons commencer par aborder certaines des fonctionnalités de base de notre liste. 4 00:00:06,210 --> 00:00:16,380 Nous allons commencer agréable et facile en ajoutant les auditeurs rapides aux alliés afin que lorsque nous cliquons, nous obtenons un effet de barrage que vous pouvez voir ici et ils grea. 5 00:00:16,890 --> 00:00:20,750 Et avant de faire cela, je vais vraiment changer notre histoire ici. 6 00:00:21,000 --> 00:00:22,910 Je vais m'en débarrasser. 7 00:00:23,190 --> 00:00:25,020 Et puis je vais ajouter une frontière à la place. 8 00:00:25,200 --> 00:00:35,800 Donc, notre frontière sera de deux pixels gris solide juste un petit changement, mais il fera de sorte qu'il est plus facile de voir quand nous tournons ces gris. 9 00:00:35,880 --> 00:00:39,170 Si nous avions un excellent arrière-plan alors il serait tout simplement mélanger. 10 00:00:39,490 --> 00:00:40,180 D'ACCORD. 11 00:00:40,200 --> 00:00:48,190 Donc ce que nous voulons arriver est quand nous cliquons sur un allié le texte à l'intérieur de l'œil est gris et nous ajoutons un effet de barré. 12 00:00:48,570 --> 00:00:50,930 Alors allons à notre fichier javascript. 13 00:00:51,210 --> 00:01:01,820 Commençons par ajouter un commentaire simple où nous pouvons vérifier spécifiques à Dewes en cliquant sur et puis nous allons faire ce travail. 14 00:01:02,010 --> 00:01:04,540 Nous devons donc sélectionner tous les alliés. 15 00:01:04,830 --> 00:01:11,020 Donc, tout ce que nous devons faire est de nous allier au lieu du signe dollar et ensuite nous ferons un clic. 16 00:01:12,150 --> 00:01:32,520 Et lorsque nous cliquons ici est la fonction que nous voulons exécuter la fonction de rappel et nous allons commencer avec juste une alerte bien cliqué allié et revenir en arrière et s'assurer que lorsque nous rafraîchir et cliquez sur un allié, il nous dit que nous avons cliqué sur un Mais nulle part ailleurs cela ne se produit. 17 00:01:32,550 --> 00:01:34,260 Génial. 18 00:01:34,260 --> 00:01:59,210 Ensuite, travaillons sur le changement de l'allié individuel sur lequel nous avons cliqué et en changeant la couleur de la couleur et le barré ou l'effet de décoration de texte plutôt que d'alerter ce que nous voulons faire est d'utiliser la méthode CSSA point et avec cela voir SS Nous allons Voulez travailler avec la propriété de couleur et activer la couleur grise et la propriété de décoration de texte et de faire cette ligne à travers. 19 00:01:59,690 --> 00:02:01,210 Commençons par la couleur. 20 00:02:01,380 --> 00:02:05,090 Donc, il ressemblerait à la couleur gris juste comme ça. 21 00:02:05,370 --> 00:02:09,610 Et puis nous devons décider ce que nous appliquons à ce que nous choisissons. 22 00:02:09,990 --> 00:02:15,180 Et ce n'est pas ce que nous voulons faire si nous choisissons juste un mensonge et ne gutsiest nous. 23 00:02:15,210 --> 00:02:24,000 Maintenant, quand je clique, ils deviennent tous gris et je sais que c'est un peu difficile de voir si je fais que quelque chose de plus évident comme le rouge quand je clique. 24 00:02:24,060 --> 00:02:29,880 Ils deviennent tous rouges ce qui n'est pas ce que nous voulons ce que nous voulons à la place est seulement celui qui a été cliqué. 25 00:02:30,150 --> 00:02:34,410 Et c'est là que le mot clé que cela entre avec l'enveloppe J Querrey. 26 00:02:34,410 --> 00:02:41,460 Cela se réfère au mensonge spécifique qui a été cliqué et nous voulons changer seulement que l'un nous SEUS afin que sa couleur est grise. 27 00:02:41,760 --> 00:02:43,510 Et nous allons tester cela. 28 00:02:43,560 --> 00:02:47,740 Maintenant, je clique sur l'allié individuel et il devient gris. 29 00:02:47,910 --> 00:02:51,000 Bien sûr, il ne retourne pas au noir quand je clique à nouveau. 30 00:02:51,030 --> 00:02:53,790 Nous n'avons pas cette fonctionnalité. 31 00:02:53,790 --> 00:02:59,370 Maintenant, nous allons obtenir le barré avec une ligne par effet afin que nous puissions faire une autre ligne comme celle-ci. 32 00:02:59,370 --> 00:03:18,200 Cela ne SEUS nous, puis la décoration de texte colon ou virgule tiret ligne à travers et enregistrer et revenir en manquant un Prentis voir ici. 33 00:03:20,070 --> 00:03:27,940 Maintenant, lorsque nous cliquons, nous obtenons un effet de barré là et la couleur devient grise. 34 00:03:29,610 --> 00:03:32,200 Mais bien sûr, il ya toujours un moyen plus facile de le faire. 35 00:03:32,220 --> 00:03:43,100 Donc, plutôt que de le faire sur deux lignes distinctes, vous pourriez avoir rappelé comment nous pourrions définir l'objet avec des paires de valeur de clé et juste faire un seul cet appel CSSA. 36 00:03:43,290 --> 00:03:52,880 Donc, nous avons ajouté un objet ici comme ça et nous avons besoin d'ajouter en couleur gris virgule. 37 00:03:53,280 --> 00:03:59,300 Et c'est un peu délicat si nous faisons le décor Dasch texte dans l'objet et définir que la ligne à travers. 38 00:03:59,580 --> 00:04:05,520 Et je sauve et rafraîchir vous voir rien ne se passe. 39 00:04:05,530 --> 00:04:11,240 Ils obtiennent effectivement une erreur parce que dans javascript Vous ne pouvez pas avoir des noms de propriété qui ont des tirets en eux. 40 00:04:11,760 --> 00:04:20,890 Donc, si nous utilisons la syntaxe où nous définissons un objet, nous avons besoin d'utiliser la déclaration de texte chameau cas qui est toujours un peu difficile. 41 00:04:20,940 --> 00:04:30,290 Et si nous sommes frais Maintenant vous pouvez voir qu'il trouve que la décoration de texte CSSA ainsi la propriété et il applique la ligne à travers et la couleur grise. 42 00:04:30,510 --> 00:04:36,540 La prochaine chose que vous pourriez vouloir faire est de le transformer en noir et se débarrasser de la ligne par un clic à nouveau. 43 00:04:37,460 --> 00:04:39,800 Pour ce faire, nous utiliserons une simple instruction IF. 44 00:04:39,900 --> 00:04:53,780 Donc nous allons vérifier si Ally est gris alors nous allons le tourner noir autrement tourner gris. 45 00:04:53,920 --> 00:05:00,820 Donc, pour vérifier si le mensonge est gris, nous pouvons faire si et nous pouvons utiliser ce truc. 46 00:05:00,890 --> 00:05:19,230 SS Et si nous le faisons comme ceci donc si pour vérifier si un allié est gris, nous pouvons réellement utiliser ce point C Ss et lui demander de couleur sans fournir une autre valeur et qui va récupérer la couleur actuelle. 47 00:05:19,620 --> 00:05:28,370 Donc, nous allons avoir une déclaration if si cela ne voit un sens de la couleur est égal au gris. 48 00:05:29,410 --> 00:05:39,120 Faisons juste un journal de concert est actuellement gris et c'est tout pour commencer. 49 00:05:39,490 --> 00:05:51,150 Alors nettoyons ça un peu et nous n'avons pas encore ou encore, alors nous allons juste laisser comme il est et revenir en arrière. 50 00:05:51,310 --> 00:06:00,030 Donc, si nous rafraîchissons et nous ouvrons la console et je clique sur un de ces il ne nous dit rien encore parce que ce n'est pas gris. 51 00:06:00,190 --> 00:06:03,230 Mais maintenant, si je clique de nouveau, il ne fonctionne toujours pas. 52 00:06:03,270 --> 00:06:05,420 Et la raison de cela est un peu délicate. 53 00:06:05,470 --> 00:06:06,930 Si nous revenons ici. 54 00:06:07,180 --> 00:06:12,820 Jetons un coup d'oeil à ce que cela fait CSSA couleur est en dehors de l'instruction if. 55 00:06:12,910 --> 00:06:15,400 Nous allons donc faire une console qui log. 56 00:06:15,690 --> 00:06:19,760 Cela démarre la couleur SS et rafraîchir la page. 57 00:06:20,250 --> 00:06:25,230 Et quand je clique, vous verrez qu'il commence comme R.G. 000. 58 00:06:25,440 --> 00:06:33,270 Et si je clique à nouveau, nous mettons la couleur à être gris et nous pensons que c'est gris maintenant si nous avons inspecté. 59 00:06:33,750 --> 00:06:40,100 Il dit que la couleur est grise mais quand je clique de nouveau, c'est en fait le R.G. version. 60 00:06:40,320 --> 00:06:45,550 Donc, lorsque nous comparons pour vérifier si la couleur est égale à Gris qui ne va pas fonctionner. 61 00:06:45,670 --> 00:06:49,820 Nous devons le comparer à R.G. Être 1 2 8 1 2 8 1 2 8. 62 00:06:50,310 --> 00:06:57,840 Et maintenant si nous essayons ceci et rafraîchissons nous devrions voir quand je clique la première fois rien je clique de nouveau. 63 00:06:58,090 --> 00:07:00,730 Il dit maintenant qu'il est actuellement gris. 64 00:07:01,150 --> 00:07:01,460 D'ACCORD. 65 00:07:01,480 --> 00:07:02,710 Donc nous pouvons utiliser cela. 66 00:07:03,030 --> 00:07:05,710 Donc, au lieu d'imprimer il est gris. 67 00:07:05,920 --> 00:07:08,070 Ce que nous voulons faire est de le rendre noir. 68 00:07:08,130 --> 00:07:15,950 Alors nous allons faire un ce qui nous voir couleur et nous allons revenir au noir. 69 00:07:16,120 --> 00:07:16,930 Juste comme ça. 70 00:07:17,110 --> 00:07:20,670 Et puis nous pouvons gérer la décoration du texte en seulement une seconde. 71 00:07:20,980 --> 00:07:24,240 Alors nous rafraîchissons et nous cliquons et nous obtenons gris. 72 00:07:24,420 --> 00:07:26,660 Et si je clique de nouveau, il ne fonctionnera toujours pas. 73 00:07:26,840 --> 00:07:29,650 Et c'est parce que nous l'écrasons à la fin ici. 74 00:07:29,710 --> 00:07:31,870 Nous le rendons gris chaque fois. 75 00:07:31,960 --> 00:07:41,060 Donc, nous voulons transférer cela dans notre autre, donc nous allons ajouter une autre déclaration ici et nous le ferons seulement si ce n'est pas actuellement Gray. 76 00:07:41,740 --> 00:07:42,220 D'accord. 77 00:07:42,390 --> 00:07:43,260 Donc nous devrions être bons. 78 00:07:43,260 --> 00:07:50,400 Maintenant, nous avons juste déplacer ce commentaire ici nettoyer les choses un peu et rafraîchir. 79 00:07:50,640 --> 00:07:54,490 Nous cliquez sur il tourne grise cuire à nouveau il retourne au noir. 80 00:07:54,550 --> 00:07:58,110 Nous avons encore la ligne à travers mais au moins la couleur est en train de changer. 81 00:07:58,420 --> 00:08:05,870 Donc, pour se débarrasser de la ligne à travers tout ce que nous devons faire est fondamentalement copier ce ou refaire un objet. 82 00:08:06,780 --> 00:08:10,460 Et plutôt que de mettre la couleur à être gris, nous allons le rendre noir. 83 00:08:10,840 --> 00:08:15,560 Et plutôt que la décoration de texte à la ligne à travers nous allons le définir pour être aucun. 84 00:08:15,900 --> 00:08:25,390 Et maintenant, si nous étions frais et réels rapidement, nous sommes basculer que fait sur et hors où nous avons le gris et la ligne à travers. 85 00:08:26,010 --> 00:08:31,560 J'espère que, comme nous le faisons, vous voyez que c'est beaucoup de travail à faire cette vérification. 86 00:08:31,650 --> 00:08:33,230 Est-il actuellement gris. 87 00:08:33,250 --> 00:08:39,580 RGV 128 128 128 si c'est alors nous allons le rendre noir et supprimer la décoration du texte. 88 00:08:39,700 --> 00:08:41,310 Sinon faites ceci. 89 00:08:41,490 --> 00:08:46,020 Il ya une façon beaucoup plus facile que nous n'avons pas à faire réellement n'importe quel de cette logique. 90 00:08:46,450 --> 00:08:59,630 Ce que nous pouvons faire est de créer une classe de sorte que nous allons créer une classe dans notre C Ss et nous allons appeler terminé ou tout simplement terminé et il aura la couleur est gris. 91 00:08:59,800 --> 00:09:00,890 Nous n'avons pas besoin de ces citations. 92 00:09:01,000 --> 00:09:09,070 Nous ne sommes pas dans le javascript et la décoration de texte sera une ligne à travers et enregistrer et puis sont de le faire. 93 00:09:09,140 --> 00:09:27,240 Oui, nous pouvons effectivement remplacer tout ce code et il a supprimé tous et tout ce que nous voulons faire est cette classe de bascule point terminé ligne unique. 94 00:09:27,490 --> 00:09:43,980 Donc, quand nous cliquons sur un allié, nous allons basculer la classe sur la diapositive que nous avons cliqué sur la classe terminée et qui le rendra gris et lui donner une ligne par effet et il va garder une trace de si elle doit le supprimer Ou ajouté automatiquement. 95 00:09:44,380 --> 00:09:48,240 Donc, vous pouvez le voir ici, il ressemble exactement comme avant.