Alterar a cor de um link selecionado que está incorporado em uma tabela

StackOverflow https://stackoverflow.com/questions/256093

  •  05-07-2019
  •  | 
  •  

Pergunta

Eu estou tentando usar nomes de classe para alterar a cor de um link depois de ter sido selecionada, para que ele continuará a ser a nova cor, mas apenas até que outro link é selecionado, em seguida, ele vai mudar de volta.

Estou usando este código que foi escrito por Martin Kool em esta questão : 

<html>     
<head>
<script>
  document.onclick = function(evt) {
    var el = window.event? event.srcElement : evt.target;
    if (el && el.className == "unselected") {
      el.className = "selected";
      var siblings = el.parentNode.childNodes;
      for (var i = 0, l = siblings.length; i < l; i++) {
        var sib = siblings[i];
        if (sib != el && sib.className == "selected")
          sib.className = "unselected";
      }
    }
  }
</script>
<style>
  .selected { background: #f00; }
</style>
</head>
 <body>
   <a href="#" class="selected">One</a> 
    <a href="#" class="unselected">Two</a> 
    <a href="#" class="unselected">Three</a>
  </body>

Ele funciona muito bem até que eu tente os links em uma tabela. Por que é isso? Ser fácil, eu sou um novato.

Não há nenhum erro, as ligações estão a mudar para a classe "selecionada", mas quando um outro link é selecionado, os links antigos estão mantendo a classe "selecionada" em vez de mudar para "não selecionado". Basicamente, tanto quanto eu posso dizer, ele está funcionando como um atributo vlink, que não é o que eu estou indo para.

E sim, as ligações são todos em diferentes células, como você sugere que eu alterar o código para que ele funcione corretamente?

OK, na verdade, eu falei cedo demais. 

document.onclick = function(evt)
{
var el = window.event? event.srcElement : evt.target;
if (el && el.className == 'unselected')
{
    var links = document.getElementsByTagName('a');
    for (var i = links.length - 1; i >= 0; i--)
    {
            if (links[i].className == 'selected')
                    links[i].className = 'unselected';
    }
    el.className = 'selected';
}

return false;
}

Este código que você me deu funciona muito bem, visualmente, ele faz exatamente o que eu quero que ele faça. No entanto, faz meus links parar de trabalhar ... Eles mudam de cor, mas não faça ligação a qualquer coisa, e então quando eu remover o script, eles trabalham muito bem. O que estou fazendo de errado / o que eu tenho que mudar para fazer este trabalho?

Além disso, eu quero fazer a mesma coisa em outro lugar no meu site, onde as ligações estão todos em um tag <div>, separados por tags <p>. Como posso fazer este trabalho?

Foi útil?

Solução

Você está looping através dos irmãos. Se as ligações estão em <td> separado para, em seguida, eles estão sem irmãos mais longos.

Você pode percorrer todos os links como este: 

document.onclick = function(evt)
{
    var el = window.event? event.srcElement : evt.target;
    if (el && el.className == 'unselected')
    {
        var links = document.getElementsByTagName('a');
        for (var i = links.length - 1; i >= 0; i--)
        {
            if (links[i].className == 'selected')
                links[i].className = 'unselected';
        }
        el.className = 'selected';
    }

    return false;
}

Eu também acrescentou um return false; no final da função de parar você vai '#'

Outras dicas

Existe um erro ou há apenas nada acontecendo? Um bom primeiro passo se você é um novato javascript é usar uma ferramenta como o Firebug para que você ver mensagens de erro detalhadas, e você pode adicionar em declarações console.log para ver o que está acontecendo enquanto você executa seu código.

Por ‘em tabelas’ você quer dizer colocar cada link em seu próprio celular? Porque isso faria esta linha: 

var siblings = el.parentNode.childNodes;

não selecionar outras ligações fora da célula. Você teria que encontrar outra forma de sinal de qual elemento é o recipiente link.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top