Ändern der Farbe einer ausgewählten Verbindung, die in einer Tabelle eingebettet ist

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

  •  05-07-2019
  •  | 
  •  

Frage

Ich versuche, Klassennamen zu verwenden, um die Farbe eines Link zu ändern, nachdem er ausgewählt wurde, so dass es die neue Farbe bleiben, aber nur, bis eine andere Verbindung ausgewählt ist, und dann wird es wieder ändern.

Ich verwende diesen Code, der von Martin Kool in gepostet diese Frage: 

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

Es funktioniert gut, bis ich aus den Links in einer Tabelle versuchen. Warum ist das? Seien Sie einfach, ich bin ein Anfänger.

Es ist kein Fehler, sind die Links zu den „ausgewählten“ Klasse zu ändern, aber wenn eine andere Verbindung ausgewählt ist, werden die alten Links, um die „ausgewählt“ Klasse zu halten, anstatt zu ändern, um „nicht ausgewählt“. Im Grunde genommen, soweit ich sagen kann, es ist wie ein vlink Attribut funktioniert, das ist nicht das, was ich werde.

Und ja, die Links sind alle in verschiedenen Zellen, wie würden Sie vorschlagen, ich den Code ändern, damit es richtig funktioniert?

OK, eigentlich, ich sprach zu früh. 

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

Dieser Code du mir gegeben hast funktioniert gut, visuell, es tut genau das, was ich will, es zu tun. Allerdings Es macht meine Links aufhören zu arbeiten ... Sie Farbe ändern, aber Link zu etwas nicht, und dann, wenn ich das Drehbuch zu entfernen, sie funktionieren gut. Was mache ich falsch / was muss ich diese Arbeit machen ändern?

Auch möchte ich die gleiche Sache woanders in meiner Website tun, wenn die Verbindungen alle in einem <div> Tag sind, getrennt durch <p> Tags. Wie kann ich diese Arbeit machen?

War es hilfreich?

Lösung

Du Looping durch die Geschwister. Wenn die Links in separaten <td> die sind, dann sind sie nicht mehr Geschwister.

Sie können eine Schleife durch alle Links wie folgt: 

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

Ich habe auch eine return false; am Ende der Funktion zu stoppen kann dir gehen ‚#‘

Andere Tipps

Gibt es einen Fehler, oder gibt es einfach nichts passiert? Ein guter erster Schritt, wenn Sie ein JavaScript-Anfänger sind, ist ein Tool wie Firebug zu verwenden, so dass Sie detaillierte Fehlermeldungen angezeigt werden, und Sie können in console.log Anweisungen hinzufügen, um zu sehen, was los ist, während Sie Ihren Code ausführen.

Mit dem ‚in den Tabellen‘ meinst du jedes Glied in seiner eigenen Zelle setzen? Denn das würde diese Zeile machen: 

var siblings = el.parentNode.childNodes;

scheitern andere Links wählen außerhalb der Zelle. Sie würden einen anderen Weg finden müssen, um zu signalisieren, welches Element ist der Link-Container.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top