Modifica del colore di un collegamento selezionato incorporato in una tabella

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

  •  05-07-2019
  •  | 
  •  

Domanda

Sto cercando di usare i nomi delle classi per cambiare il colore di un collegamento dopo che è stato selezionato, in modo che rimanga il nuovo colore, ma solo fino a quando non viene selezionato un altro collegamento, e poi cambierà di nuovo.

Sto usando questo codice che è stato pubblicato da Martin Kool in questa domanda: 

<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>

Funziona bene finché non provo a estrarre i collegamenti in una tabella. Perchè è questo? Sii facile, sono un principiante.

Non ci sono errori, i collegamenti stanno cambiando in " selezionato " classe, ma quando viene selezionato un altro collegamento, i vecchi collegamenti mantengono il " selezionato " class invece di cambiare in " unselected " ;. Fondamentalmente, per quanto posso dire, funziona come un attributo vlink, che non è quello che sto cercando.

E sì, i collegamenti sono tutti in celle diverse, come suggeriresti di cambiare il codice in modo che funzioni correttamente?

OK, in realtà, ho parlato troppo presto. 

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;
}

Questo codice che mi hai dato funziona alla grande, visivamente, fa esattamente quello che voglio che faccia. Tuttavia, fa sì che i miei collegamenti smettano di funzionare ... Cambiano colore, ma non si collegano a nulla, e quindi quando rimuovo lo script, funzionano bene. Cosa sto facendo di sbagliato / cosa devo cambiare per farlo funzionare?

Inoltre, voglio fare la stessa cosa altrove nel mio sito Web, in cui i collegamenti sono tutti in un tag <div>, separati da <p> tag. Come posso farlo funzionare?

È stato utile?

Soluzione

Stai attraversando i fratelli. Se i collegamenti si trovano in <td> separati, non sono più fratelli.

Puoi scorrere tutti i collegamenti in questo modo: 

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;
}

Ho anche aggiunto un return false; alla fine della funzione per impedirti di passare a '#'

Altri suggerimenti

C'è un errore o non succede nulla? Un buon primo passo se sei un principiante di JavaScript è usare uno strumento come Firebug in modo da visualizzare messaggi di errore dettagliati e puoi aggiungere istruzioni console.log per vedere cosa sta succedendo mentre esegui il tuo codice.

Di & # 8216; nelle tabelle & # 8217; intendi mettere ogni link nella sua cella? Perché ciò renderebbe questa linea: 

var siblings = el.parentNode.childNodes;

non riescono a selezionare altri collegamenti al di fuori della cella. Dovresti trovare un altro modo per segnalare quale elemento è il contenitore dei collegamenti.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top