Todo bien.
Dar una buena acogida.
Y este video vamos a comenzar abordando algunas de las funcionalidades básicas de nuestra lista.
Comenzaremos de forma agradable y fácil agregando a los oyentes rápidos a los aliados para que cuando
hagamos clic tengamos un pequeño efecto de tachado que pueda ver aquí y salgan bien.
Y antes de hacerlo, realmente voy a cambiar un poco nuestro contexto aquí.
Voy a deshacerme de ese fondo.
Y luego voy a agregar un borde en su lugar.
Así que nuestro borde será de dos píxeles de gris sólido con solo un pequeño cambio, pero lo hará de modo que sea más fácil de
ver cuando cambiemos estos tonos de gris.
Si tuviéramos una gran formación, entonces se mezclaría totalmente.
DE ACUERDO.
Entonces, lo que queremos que suceda es que cuando hacemos clic en un aliado, el texto dentro del ojo es gris y agregamos un
efecto de tachado.
Así que vamos a nuestro archivo javascript.
un comentario simple donde podamos marcar específicamente a Dewes haciendo clic y luego hagamos que funcione.
Comencemos agregando
Entonces, tenemos que seleccionar a todos los aliados.
Entonces, todo lo que tenemos que hacer es aliar en lugar del signo de dólar y luego haremos un clic.
Y cuando haga clic aquí es la función en la que queremos ejecutar la función de devolución de
llamada y comenzaremos con solo un agradable aliado de clic de alerta y volveremos y nos aseguraremos de que cuando actualicemos y hacemos clic en un aliado nos indique
que hicimos clic en un aliado, pero en ningún otro lugar sucede eso.
Estupendo.
convertir el color gris y la propiedad de decoración de texto y hacer que esa línea pase.
A continuación, trabajemos en cambiar el aliado individual en el que hicimos clic y cambiar el color y el tachado o
el efecto de decoración de texto en lugar de alertar sobre lo que queremos hacer es utilizar el método dot CSSA
y con eso ver SS. Vamos a desea trabajar con la propiedad de color y
Comencemos con el color.
Así que se vería como el color gris así como así.
Y luego tenemos que decidir qué estamos aplicando a qué estamos seleccionando.
Y esto no es lo que queremos hacer si seleccionamos una mentira y nos hacemos más valientes.
que es un poco difícil de ver si hago que algo más obvio, como el rojo, cuando hago clic.
Ahora cuando hago clic en ellos se vuelven grises y sé
Todos se ponen rojos, que no es lo que queremos, lo que queremos es solo el que se hizo clic.
Y ahí es donde entra la palabra clave con el envoltorio J Querrey.
Esto se refiere a la mentira específica en la que se hizo clic y queremos cambiar solo ese SEUS nosotros para que
su color sea gris.
Y probaremos eso.
Ahora hago clic en el aliado individual y se vuelve gris.
Por supuesto, no vuelve a negro cuando hago clic de nuevo.
No tenemos esa funcionalidad.
Ahora tomemos el tachado con un efecto de línea para que podamos hacer otra línea como esta.
Esto hace que SEUS nosotros y luego la columna de comas o puntos de decoración de texto salgan disparados y guarden y vuelvan a
perder un Prentis aquí.
Ahora cuando hacemos clic obtenemos un efecto de tachado allí y el color cambia a gris.
Pero, por supuesto, siempre hay una forma más fácil de hacerlo.
Entonces, en lugar de hacerlo en dos líneas separadas, es posible que haya recordado cómo podríamos definir el
objeto con los pares de valores clave y simplemente hacer una sola llamada CSSA.
Así que agregamos un objeto aquí así como así y tenemos que agregar una coma de color gris.
Y esto es un poco complicado si hacemos un texto con la decoración de Dasch en el objeto y lo configuramos para que esté en línea recta.
Y guardo y actualizo, no veo que pase nada.
De hecho, reciben un error porque en javascript no puede tener nombres de propiedad que
tengan guiones.
Entonces, si estamos usando la sintaxis donde definimos un objeto, necesitamos usar un camello de declaración de texto que siempre
es un poco complicado.
encuentra esa decoración de texto para que la propiedad CSSA aplique la línea y el color gris.
Y si estamos frescos Ahora puede ver que
Lo siguiente que quizás quieras hacer es volver a ponerlo en negro y deshacerte de la línea
con un clic nuevamente.
Para hacer eso usaremos una declaración simple de IF.
Entonces comprobaremos si Ally es gris, entonces lo cambiaremos a negro, de
lo
contrario, se volverá gris.
Entonces, para verificar si la mentira es gris, podemos hacer si podemos usar estas cosas.
SS Y si lo hacemos así, si para verificar si un aliado es gris, podemos usar este punto C Ss y preguntar por el
color sin proporcionar otro valor y que recuperará el color actual.
Entonces tendremos una declaración if si esto ve una sensación de color es igual a gris.
Solo hagamos un registro de conciertos actualmente gris y todo está por comenzar.
Así que limpiemos esto un poco y no
lo tengamos o aún así, así que lo dejaremos como está y volveremos.
Entonces, si actualizamos y abrimos la consola y hago clic en una de ellas, todavía no nos dice
nada porque no es gris.
Pero ahora si vuelvo a hacer clic, todavía no funciona.
Y la razón de eso es un poco complicado.
Si volvemos aquí.
Echemos un vistazo a lo que esto hace el color CSSA está fuera de la declaración if.
Entonces haremos una consola que log.
Esto inicia el color SS y actualiza la página.
Y cuando hago clic verás que comienza como R. GRAMO. 000.
hacer clic, estamos configurando el color para que sea gris y creemos que ahora es gris si lo inspeccionamos.
Y si vuelvo a
Dice que el color es gris, pero cuando hago clic de nuevo, en realidad es el R. GRAMO. versión.
Entonces, cuando estamos comparando para verificar si el color es igual a Grey eso no va a funcionar.
Necesitamos compararlo con R. GRAMO. be 1 2 8 1 2 8 1 2 8.
Y ahora, si probamos esto y actualizamos, deberíamos ver cuando hago clic la primera vez, nada de lo que haga clic de nuevo.
Ahora dice que actualmente es gris.
DE ACUERDO.
Entonces podemos usar eso.
Entonces, en lugar de simplemente imprimir, actualmente es gris.
Lo que queremos hacer es volverlo negro.
Así que haremos esto que nos vea de color y volveremos al negro.
Así.
Y luego podemos manejar la decoración del texto en solo un segundo.
Así que actualizamos y hacemos clic y nos pone gris.
Y si vuelvo a hacer clic, todavía no funcionará.
Y eso es porque lo estamos sobrescribiendo al final aquí.
Lo estamos volviendo gris todo el tiempo.
Por lo tanto, queremos pasar eso a nuestro otro modo, por lo que agregaremos una declaración else aquí y lo haremos solo
si no es actualmente gris.
Todo bien.
Entonces deberíamos ser buenos.
Ahora solo movemos este comentario aquí, limpiemos un poco las cosas y refresquemos.
Hacemos clic en gris se vuelve a cocinar, vuelve a negro.
Todavía tenemos la línea, pero al menos el color está cambiando.
Entonces, para deshacernos de la línea a través de todo lo que tenemos que hacer es básicamente copiar esto o rehacer un objeto.
Y en lugar de configurar el color para que sea gris lo haremos negro.
Y en lugar de decorar el texto para alinearlo, lo configuraremos como ninguno.
Y ahora, si estuviéramos frescos y realmente rápidos, estaríamos alternando entre lo hecho y lo apagado, donde tenemos el gris
y la línea recta.
Afortunadamente, a medida que avanzamos en esto, vemos que es mucho trabajo hacer esta comprobación.
¿Es actualmente gris?
RGV 128 128 128 si es así, lo haremos negro y eliminaremos la decoración del texto.
De lo contrario, haz esto.
Hay una manera mucho más fácil de no tener que hacer realmente esta lógica.
Lo que podemos hacer es crear una clase así que crearemos una clase en nuestro C Ss y
la llamaremos completa o simplemente completada y tendrá un color gris.
No necesitamos esas citas
No estamos en javascript y la decoración de texto será una línea y guardaremos y luego haremos eso.
y eliminarlo todo, y todo lo que queremos hacer es completar esta línea de alternar puntos con una sola
línea.
Sí, podemos reemplazar todo este código
Así que cuando hagamos clic en un aliado vamos a cambiar la clase en la diapositiva en la que hicimos
clic en la clase completada y eso la convertirá en gris y le dará una línea a través del efecto
y hará un seguimiento de si necesita eliminarla o agregado automáticamente
Para que pueda ver aquí se ve exactamente igual que antes.
Pero solo teníamos que escribir una línea de código en lugar de 10 o más líneas, y el próximo video hablará sobre cómo
podemos lograr que la X realmente la guíe a hacer