D'accord.
Nous saluons le retour.
Et cette vidéo, nous allons commencer par aborder certaines des fonctionnalités de base de notre liste.
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.
Et avant de faire cela, je vais vraiment changer notre histoire ici.
Je vais m'en débarrasser.
Et puis je vais ajouter une frontière à la place.
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.
Si nous avions un excellent arrière-plan alors il serait tout simplement mélanger.
D'ACCORD.
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é.
Alors allons à notre fichier javascript.
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.
Nous devons donc sélectionner tous les alliés.
Donc, tout ce que nous devons faire est de nous allier au lieu du signe dollar et ensuite nous ferons un clic.
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.
Génial.
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.
Commençons par la couleur.
Donc, il ressemblerait à la couleur gris juste comme ça.
Et puis nous devons décider ce que nous appliquons à ce que nous choisissons.
Et ce n'est pas ce que nous voulons faire si nous choisissons juste un mensonge et ne gutsiest nous.
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.
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é.
Et c'est là que le mot clé que cela entre avec l'enveloppe J Querrey.
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.
Et nous allons tester cela.
Maintenant, je clique sur l'allié individuel et il devient gris.
Bien sûr, il ne retourne pas au noir quand je clique à nouveau.
Nous n'avons pas cette fonctionnalité.
Maintenant, nous allons obtenir le barré avec une ligne par effet afin que nous puissions faire une autre ligne comme celle-ci.
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.
Maintenant, lorsque nous cliquons, nous obtenons un effet de barré là et la couleur devient grise.
Mais bien sûr, il ya toujours un moyen plus facile de le faire.
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.
Donc, nous avons ajouté un objet ici comme ça et nous avons besoin d'ajouter en couleur gris virgule.
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.
Et je sauve et rafraîchir vous voir rien ne se passe.
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.
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.
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.
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.
Pour ce faire, nous utiliserons une simple instruction IF.
Donc nous allons vérifier si Ally est gris alors nous allons le tourner noir autrement tourner gris.
Donc, pour vérifier si le mensonge est gris, nous pouvons faire si et nous pouvons utiliser ce truc.
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.
Donc, nous allons avoir une déclaration if si cela ne voit un sens de la couleur est égal au gris.
Faisons juste un journal de concert est actuellement gris et c'est tout pour commencer.
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.
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.
Mais maintenant, si je clique de nouveau, il ne fonctionne toujours pas.
Et la raison de cela est un peu délicate.
Si nous revenons ici.
Jetons un coup d'oeil à ce que cela fait CSSA couleur est en dehors de l'instruction if.
Nous allons donc faire une console qui log.
Cela démarre la couleur SS et rafraîchir la page.
Et quand je clique, vous verrez qu'il commence comme R.G. 000.
Et si je clique à nouveau, nous mettons la couleur à être gris et nous pensons que c'est gris maintenant si nous avons inspecté.
Il dit que la couleur est grise mais quand je clique de nouveau, c'est en fait le R.G. version.
Donc, lorsque nous comparons pour vérifier si la couleur est égale à Gris qui ne va pas fonctionner.
Nous devons le comparer à R.G. Être 1 2 8 1 2 8 1 2 8.
Et maintenant si nous essayons ceci et rafraîchissons nous devrions voir quand je clique la première fois rien je clique de nouveau.
Il dit maintenant qu'il est actuellement gris.
D'ACCORD.
Donc nous pouvons utiliser cela.
Donc, au lieu d'imprimer il est gris.
Ce que nous voulons faire est de le rendre noir.
Alors nous allons faire un ce qui nous voir couleur et nous allons revenir au noir.
Juste comme ça.
Et puis nous pouvons gérer la décoration du texte en seulement une seconde.
Alors nous rafraîchissons et nous cliquons et nous obtenons gris.
Et si je clique de nouveau, il ne fonctionnera toujours pas.
Et c'est parce que nous l'écrasons à la fin ici.
Nous le rendons gris chaque fois.
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.
D'accord.
Donc nous devrions être bons.
Maintenant, nous avons juste déplacer ce commentaire ici nettoyer les choses un peu et rafraîchir.
Nous cliquez sur il tourne grise cuire à nouveau il retourne au noir.
Nous avons encore la ligne à travers mais au moins la couleur est en train de changer.
Donc, pour se débarrasser de la ligne à travers tout ce que nous devons faire est fondamentalement copier ce ou refaire un objet.
Et plutôt que de mettre la couleur à être gris, nous allons le rendre noir.
Et plutôt que la décoration de texte à la ligne à travers nous allons le définir pour être aucun.
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.
J'espère que, comme nous le faisons, vous voyez que c'est beaucoup de travail à faire cette vérification.
Est-il actuellement gris.
RGV 128 128 128 si c'est alors nous allons le rendre noir et supprimer la décoration du texte.
Sinon faites ceci.
Il ya une façon beaucoup plus facile que nous n'avons pas à faire réellement n'importe quel de cette logique.
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.
Nous n'avons pas besoin de ces citations.
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.
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.
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.
Donc, vous pouvez le voir ici, il ressemble exactement comme avant.