Tudo bem.
Bem vindo de volta.
E este vídeo vamos começar abordando algumas das funcionalidades básicas da nossa lista.
Vamos começar agradável e fácil, adicionando os ouvintes rápidos aos aliados para que, quando clicarmos,
obtenhamos um pequeno efeito tachado que você pode ver aqui e eles escapam.
E antes de fazer isso, eu realmente vou mudar o nosso conhecimento um pouco aqui.
Eu vou me livrar desse fundo.
E então eu vou adicionar uma borda em vez disso.
Então, nossa borda será de dois pixels cinza sólido, apenas uma pequena mudança, mas isso fará com que seja mais fácil
de ver quando transformamos esses cinza.
Se tivéssemos uma ótima experiência, seria simplesmente uma mistura total.
ESTÁ BEM.
Então, o que queremos acontecer é quando clicamos em um aliado, o texto dentro do olho é cinza e adicionamos um
efeito tachado.
Então vamos ao nosso arquivo javascript.
adicionando um comentário simples, onde podemos verificar o específico para Dewes clicando e depois vamos fazer isso funcionar.
Vamos começar
Portanto, precisamos selecionar todos os aliados.
Então, tudo o que precisamos fazer é aliado em vez do sinal de dólar e então vamos fazer um clique.
E quando clicamos aqui é a função que queremos executar a função de retorno de
chamada e começamos com apenas um alerta aliado e voltei e certifique-se de que, quando atualizamos e clicamos em um aliado, nos diz que
clicamos em um Alien, mas em nenhum outro lugar isso acontece.
Ótimo.
e torne a cor cinza e a propriedade de decoração de texto e faça essa linha passar.
Em seguida, vamos trabalhar em mudar o aliado individual em que clicamos e mudando a cor da cor e o tachado
ou o efeito de decoração de texto ao invés de alertar o que queremos fazer é usar o método CSSA ponto
e com isso veja SS Nós vamos quer trabalhar com a propriedade de cor
Vamos começar com a cor.
Então, seria parecido com a cor cinza assim.
E então temos que decidir o que estamos aplicando para o que estamos selecionando.
E isso não é o que queremos fazer, se apenas selecionarmos uma mentira e nos ajudar.
é um pouco difícil de ver se eu faça algo mais óbvio como vermelho quando eu clicar.
Agora, quando eu clico, eles ficam cinzentos e eu sei que
Todos ficam vermelhos, o que não é o que queremos o que queremos, é o único que foi clicado.
E é aí que a palavra-chave vem com o invólucro J Querrey.
Isso se refere à mentira específica que foi clicada e queremos mudar apenas aquele SEUS nós para que
sua cor seja cinza.
E vamos testar isso.
Agora eu clico no aliado individual e fica cinza.
Claro que não volta ao preto quando eu clicar novamente.
Não temos essa funcionalidade.
Agora vamos pegar o tachado com uma linha através do efeito para que possamos fazer outra linha como essa.
Isso faz SEUS nós e, em seguida, a decoração de texto, dois pontos ou linha de vírgulas, e salve e volte a perder
um Prentis, veja aqui.
Agora, quando clicamos, obtemos um efeito tachado e as cores mudam para ficar cinza.
Mas é claro que sempre há uma maneira mais fácil de fazer isso.
Então, em vez de fazê-lo em duas linhas separadas, você pode ter lembrado como podemos definir
o objeto com pares de valores-chave e simplesmente fazer uma única chamada CSSA.
Então, nós adicionamos um objeto aqui, assim, e precisamos adicionar na cor vírgula cinza.
E isso é um pouco complicado se fizermos o texto de decoração Dasch no objeto e definir isso para ser transmitido.
E eu salvar e atualizar você não vê nada acontecer.
Eles realmente recebem um erro porque em javascript Você não pode ter nomes de propriedade que tenham
hifens neles.
Então, se estamos usando a sintaxe onde definimos um objeto, precisamos usar a declaração de texto caso de camelo que é
sempre um pouco complicado.
que encontra essa decoração de texto para a propriedade CSSA e aplica a linha e a cor cinza.
E se estamos frescos Agora, você pode ver
A próxima coisa que você pode querer fazer é voltar a preto e se livrar da linha
com um clique novamente.
Para fazer isso, usaremos uma declaração IF simples.
Então, verificamos se Ally está cinza, então vamos transformá-lo em
preto,
mais torná-lo cinza.
Então, para verificar se a mentira é cinza, podemos fazer se e podemos usar essas coisas.
SS E se nós apenas fazemos isso assim, para verificar se um aliado é cinza, podemos realmente usar este ponto C Ss e pedir cor para
color sem fornecer outro valor e isso irá recuperar a cor atual.
Então, teremos uma afirmação se se ver se uma sensação de cor é igual ao cinza.
Vamos apenas fazer um registro de concertos no momento cinza e tudo isso deve começar.
Então, vamos limpar isso um pouco e
nós não temos ou então ainda, então vamos deixar como é e voltar.
Então, se atualizarmos e abrimos o console e clicando em um desses, não nos diz nada ainda
porque não é cinza.
Mas agora, se eu clicar novamente, ele ainda não funciona.
E o motivo disso é um pouco complicado.
Se voltarmos aqui.
Vamos dar uma olhada no que isso faz CSSA cor está fora da afirmação if.
Então, vamos fazer um console que logar.
Isso inicia a cor SS e atualiza a página.
E quando eu clicar, você verá que começa como R. G. 000.
nós estamos configurando a cor para ficar cinza e nós pensamos que está cinza agora mesmo se nós inspecionamos.
E se eu clicar novamente,
Diz que a cor é cinza, mas quando eu clicar novamente é realmente a R. G. versão.
Então, quando estamos comparando para verificar se a cor é igual a Gray, isso não vai funcionar.
Precisamos compará-lo com R. G. seja 1 2 8 1 2 8 1 2 8.
E agora, se tentarmos isso e atualizarmos, devemos ver quando eu clicar na primeira vez que eu clicar novamente.
Agora diz que está cinza.
ESTÁ BEM.
Então podemos usar isso.
Então, ao invés de apenas imprimir, está atualmente Cinzento.
O que queremos fazer é transformá-lo em preto.
Então, vamos fazer um presente que nos veja cores e nós vamos voltar para o preto.
Bem desse jeito.
E então podemos lidar com a decoração de texto em apenas um segundo.
Então, atualizamos e clicamos e ficamos cinza.
E se eu clicar novamente, ele ainda não funcionará.
E é porque acabamos de sobrescrever no final aqui.
Estamos ficando cinzentos a cada momento.
Então, queremos mudar isso para o nosso caso, então vamos adicionar uma outra afirmação aqui e nós faremos isso
somente se não estiver cinza.
Tudo bem.
Então devemos ser bons.
Agora, basta mover este comentário aqui, limpar as coisas um pouco e atualizar.
Nós clicamos, ele torna o cinza cozinhar novamente, ele volta ao preto.
Ainda temos a linha, mas pelo menos a cor está mudando.
Então, para se livrar da linha através de tudo o que precisamos fazer é basicamente copiar isso ou refazer um objeto.
E, ao invés de configurar a cor para ficar cinza, tornamos preto.
E ao invés de decoração de texto para filtrar, vamos configurá-lo para não ser nenhum.
E agora, se estivéssemos frescos e realmente rápidos, estamos tocando isso feito dentro e fora, onde nós temos o cinza
e a linha.
Felizmente, quando estamos passando por isso, você está vendo que é um monte de trabalho fazer essa verificação.
Atualmente é Gray.
RGV 128 128 128 se for, então vamos torná-lo preto e remover a decoração de texto.
Caso contrário, faça isso.
Há uma maneira muito mais fácil de que não precisamos realmente fazer essa lógica.
O que podemos fazer é criar uma aula para que possamos criar uma aula em nossos C Ss e
vamos chamá-lo concluído ou acabado de completar e ele terá cor é cinza.
Não precisamos dessas citações.
Não estamos no javascript e a decoração de texto será uma linha e salvará e, em seguida, é para fazer isso.
e ele eliminou tudo e tudo o que queremos fazer é que esta classe de alternância de pontos tenha completado uma única
linha.
Sim, podemos realmente substituir todo este código
Então, quando clicamos em um aliado, vamos alternar a classe no slide que clicamos na classe
concluída e isso o tornará cinza e dar-lhe uma linha através do efeito e ele irá
acompanhar se ele precisa removê-lo ou adicionado automaticamente.
Então, você pode ver aqui, parece exatamente o mesmo que antes.
Mas nós só precisamos escrever uma linha de código em vez de 10 ou mais linhas e o próximo vídeo irá falar sobre
como podemos obter o X para realmente levá-lo a fazer