Alterar classe de um link permanentemente ao clicar

[Paulo Washington 0]

Olá a todos,

 

Estou criando um sistema de video aulas. Tenho a disposição links com duas classes distintas.

1- me mostra o status de VIDEO AINDA NÃO VISTO

2- me mostra o status de ASSISTIDO

 

Gostaria de saber como fazer para mudar a classe de 1 para 2 "PERMANENTEMENTE" quando o aluno clicar no link que o levará para a página do vídeo. Aí quando ele voltar na lista vai estar marcado que ele já assistiu a aula do link clicado anteriormente.

 

Exemplo:

<a href="#" class="minhaclasseA"></a> quando clicado > <a href="#" class="minhaclasseB"></a>

 

Desde já agradeço!

[echo "VINICIUS" 3]

Olá, boa tarde.

 

Bom, vc pode fazer isto de duas formas:

 

- gravando no banco o video já visto e imprimindo a classe de acordo com o banco.

 

ou (o mais aconselhável)

 

- criar um cookie e imprimir a classe de acordo com a existência dele.

 

Veja no link, como manipulá-los.

 

http://www.w3schools.com/js/js_cookies.asp

 

Abs

[Paulo Washington 0]

Obrigado VINICIUS! estive tentando intender o conteúdo do link que me passou.. não saco muito de js. Se não for muito incomodo teria como postar um exemplo utilizando a situação citada?

 

<a href="#" class="minhaclasseA"></a> quando clicado > <a href="#" class="minhaclasseB"></a>

 

Lembrando que vou ter vários links com a mesma classe inicial na mesma página. Portanto tem que mudar um por vez a medida que eles forem sendo clicados.

 

Agradeço muito!!!!

[William Bruno 1501]

cara.. o pseudo :visited faz exatamente isso!

 

apenas estilize ele, vc não precisa de classes e nem de javascript. Apenas css puro.

[Paulo Washington 0]

Olá William,

 

Obrigado pela resposta.. mas neste caso não funciona.. tenho links como classe igual a todos eles pq estou utilizando um icone do Bootstrap. O que eu preciso é trocar mesmo a classe permanentemente de cada link individualmente ao ser clicado. No caso do pseudo 'visited' iria mexer em todos os links de uma vez... Parece a melhor opção mesmo é o ajax.. java script. Vou vendo se consigo uma luz valew!!

[William Bruno 1501]

não cara.. é só usar direito!

 

estude sobre seletores.

 

a.minhaclasseA:visited {}

e pronto.

[dnielrodrigues 1]

Se for usar js puro sem jQuery o jeito mais fácil é usando o id para o javascript não "se perder":

 

 

window.onload = function() {

var nomeDoBotao = document.getElementById("id-do-botao");

var nomeDoElemento = document.getElementById("id-do-elemento");

nomeDoBotao.onclick = function() {

nomeDoElemento.className = "class-nova";

}

}

 

Se for para mudar o próprio elemento quando clicado é só trocar a variavel do elemento por this dentro da função.

 

Lembrando das boas praticas do js:

- Sempre que possível usar sempre o id para o js e class para css. Evitar o máximo possível usar class para referenciar funções js por elas fazerem parte do estilo e não do comportamento.

 

 

 

Opa amigo, acho que não li sua dúvida direito. Entendi errado. Voltando:

 

Usar :visited ou o cookie não me parece boa ideia. Porque se o aluno visitar o site de outro computador aí ferrou tudo, vai parecer que ele vai começar o curso todo de novo, e se o coitado já estiver no final???

 

Realmente este é um caso para php, asp ou a linguagem de programação que estiver usando. Aí o amigo pode se dirigir a categoria do fórum da sua linguagem.

 

Espero ter ajudado,

[Paulo Washington 0]

Obrigado pessoal pela ajuda.. vou tentando com as informações. Mas creio que vou fazer com php mesmo.. terei que gravar a informação em banco para ser apresentada quando o usuário acessar por computadores distintos... isso é verdade!

 

Na verdade é só para mostrar visualmente ao aluno na lista de vídeos-aula, as que ele já assistiu ou não. No caso js ou cookie se perderia em outra máquina.. preciso gravar mesmo. Obrigado a todos!