Modification de la couleur d'un lien sélectionné incorporé dans un tableau

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

  •  05-07-2019
  •  | 
  •  

Question

J'essaie d'utiliser les noms de classe pour changer la couleur d'un lien après sa sélection, afin que la couleur reste la nouvelle, mais uniquement jusqu'à ce qu'un autre lien soit sélectionné, puis il sera rétabli.

J'utilise ce code qui a été publié par Martin Kool dans cette question: 

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

Cela fonctionne bien jusqu'à ce que j'essaye de sortir les liens d'un tableau. Pourquoi est-ce? Sois tranquille, je suis débutant.

Il n'y a pas d'erreur, les liens changent pour le " sélectionné " classe, mais lorsqu'un autre lien est sélectionné, les anciens liens conservent le & "sélectionné" & "; classe au lieu de changer en " non sélectionné & ";. Pour autant que je sache, il fonctionne comme un attribut vlink, ce qui n’est pas ce que je cherche.

Et oui, les liens sont tous dans des cellules différentes, comment suggéreriez-vous que je modifie le code pour qu'il fonctionne correctement?

OK, en fait, j'ai parlé trop tôt. 

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

Ce code que vous m'avez donné fonctionne très bien, visuellement, il fait exactement ce que je veux qu'il fasse. Cependant, mes liens cessent de fonctionner ... Ils changent de couleur, mais ne créent pas de lien vers quoi que ce soit, puis lorsque je supprime le script, ils fonctionnent correctement. Qu'est-ce que je fais mal / qu'est-ce que je dois changer pour que cela fonctionne?

De plus, je souhaite faire la même chose ailleurs sur mon site Web, où les liens sont tous dans une balise <div> séparée par des balises <p>. Comment puis-je faire ce travail?

Était-ce utile?

La solution

Vous parcourez la fratrie. Si les liens se trouvent dans des <td> séparés, ils ne sont plus frères et soeurs.

Vous pouvez parcourir tous les liens comme ceci: 

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

J'ai également ajouté un return false; à la fin de la fonction pour vous empêcher de passer à '#'

Autres conseils

Y a-t-il une erreur ou rien ne se passe-t-il? Si vous êtes un débutant en javascript, commencez par utiliser un outil tel que Firebug afin d'afficher des messages d'erreur détaillés. Vous pouvez également ajouter des instructions console.log pour savoir ce qui se passe lorsque vous exécutez votre code.

Par & # 8216; dans les tableaux & # 8217; voulez-vous dire mettre chaque lien dans sa propre cellule? Parce que cela ferait cette ligne: 

var siblings = el.parentNode.childNodes;

ne parvient pas à sélectionner d'autres liens en dehors de la cellule. Vous devez trouver un autre moyen de signaler quel élément est le conteneur de liens.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top