Das macht man doch mit Javascript oder?

[Hans]

Hallo,
ich habe leider keinen blassen Schimmer von Javascript, das mal vorweg.
Folgendes Problem ich habe auf einer Seite jede Menge <DIV>s die mit Inforamtionen aus einer Datenbankabfrage gefüllt sind, unter anderem jede Menge IDs.
<div>Spieler1: $spieler_id, Spieler2: $spieler_id,etc.,Spiel3: $spiel_id, Spiel7: $spiel_id, etc.</div>
Nun möchte ich gerne wenn ich irgendeins dieser Divs mit der Maus anklicke (oder mit der Maus drüber fahre), dass diese und alle anderen Divs die (wie im obigen Beispiel benannt) entweder die Spieler1, Spieler2, Spiel3 oder Spiel7 ID enthalten gehighlighted werden (also zum Beispiel den <DIV>s eine neue Klasse zugeordnet werden).
Nun meine Fragen:
Kann man das mit Javascript machen?
Gibt es da eine Sprache die besser geeignet ist?
Gibt es irgendwo ein Tutorial wo ein blutiger Anfänger wie ich lernen kann, dieses Problem zu lösen?
Gibt es eventuell eine Script, mit der Lösung (man muß ja nicht jedesmal das Rad neu erfinden ;-) )?
Wonach muß ich suchen (Mouseover habe ich schon mal gehört, aber bisher habe ich immer den Eindruck, das hier die Ereignisse auf das Div oder die Zelle beschränkt sind, die direkt mit der Maus angewält werden)?

Wäre euch dankbar, wenn ihr mich in die richtige Richtung schubsen könntet (und jede weitergehende Hilfe wird auch gerne angenommen...)

Grüße,
Hans

[Steel]

Hi!

Ich verstehe nichtmal dein Problem genau. In deinem Beispiel existiert genau ein div-Element mit ner Menge Inhalt. Koenntest Du da etwas konkreter werden? Hast Du ein Beispiel online?

[Hans]

Hi!

Ich verstehe nichtmal dein Problem genau. In deinem Beispiel existiert genau ein div-Element mit ner Menge Inhalt. Koenntest Du da etwas konkreter werden? Hast Du ein Beispiel online?

Hi,
habe leider nichts online.(die Nummern im DIV Tag sind nur zur späteren Erklärung);

<div1 class="normal">$p_id=1, $p_id=2, $p_id=3, $s_id=1, $s_id=2, $s_id=3</div>
<div2 class="normal">$p_id=1, $p_id=5, $s_id=7, $s_id=10</div>
<div3 class="normal">$p_id=2, $s_id=7</div>
<div4 class="normal">$p_id=6, $s_id=2</div>

Wenn ich nun mit der Maus auf den Bereich <div1> gehe soll <div1>, <div2>(enthält die gleiche $p_id=1, <div3>(enthält die $p_id=2 und <div4>(enthält $s_id=2) die Klasse = auswahl zugeordnet werden.
Wenn ich mit der Maus auf den Bereich <div2> gehe sollen: <div1>(enthält p_id=1) und <div3>(enthält s_id=7) die klasse zugeordent werden.
Gehe ich auf <div3> werden auch <div1>(wegen p_id=2) und <div2> wegen s_id=10
die Klasse zugeordnet
Gehe ich auf <div4> wird auch <div1> die KLasse zugeordent (wegen s_id=2)

Hoffe das ist jetzt verständlicher.

Grüße,
Hans

[LX]

Du willst also von mouseover bis mouseout HTML-Klassen mehrerer div-Elemente auf Basis eines Vergleichs des jeweiligen Inhalts setzen?

Für die Events gibt es die DOM-Attribute element.onmouseover und element.onmouseout, die man mit Funktionen befüllen kann. Auf onmouseout solltest Du eine Funktion legen, die allen divs ihre ursprüngliche Klasse zurückgibt. Da onmouseover auf das jeweilige div zugreifen muss, empfielt sich hier, das jeweilige Node an das Event zu übergeben. Das kann man mit einer Closure machen oder indem man das Event aus dem HTML-Eventattribut heraus mit dem Argument "this" bestückt.

Die Closure-Lösung sieht im JavaScript folgendermaßen aus:

var elements = document.getElementsByTagName('div');  
for (var i=0; i < elements.length; i++) {  
    elements[i].onmouseover = function(element) { return function() {  
        // hier muss die Klasse gesetzt werden  
    }}(elements[i]);  
    elements[i].onmouseout = function() {  
        // hier musst Du alle Klassen wieder entfernen  
    };  
}

Die HTML-Lösung geht so:

<div onmouseover="setClasses(this);" onmouseout="removeClasses();">...</div>

Und im JavaScript muss man dann die Funktionen setClasses und removeClasses definieren.

Jetzt zum Kreuzvergleich: den Inhalt bekommst Du mit innerHTML. Diesen musst Du in seine Bestandteile zerlegen, dass geht am schnellsten mit einer RegExp:

var values = {};  
element.innerHTML.replace(/([^=,\ ]+)=(\d+)/g, function(f, k, v) { values[k]=v; });

Nun befindet sich in values ein Objekt mit allen Werten, die in dem Inhalt zu finden sind, z.b values['p_id'] == 1; Dieses kannst Du mit einer for (key in values) - Schleife durchlaufen und alle anderen divs in einer weiteren Schleife testen (Achtung: nur das Aufkommen des Wertes innerhalb des Strings zu testen, reicht nicht, da p=1 auch bei p=10 zutreffen würde).

HTML-Klassen vergibt man in JavaScript über die Eigenschaft className.

Jetzt musst Du nur noch das alles zusammenbauen und schon hast Du die Lösung :-)

Gruß, LX

[Hans]

Jetzt musst Du nur noch das alles zusammenbauen und schon hast Du die Lösung :-)

Gruß, LX

Wow,
ich verstehe zwar (noch) nicht alles was Du da geschrieben hast, aber danke für die ausführliche Erklärung, mal schauen ob ich das hinbekomme.
Danke,
Hans

[LX]

Gern geschehen. Wenn Du weitere Fragen hast, kannst Du gern auf diesen Thread zurückkommen.

Gruß, LX

[Don P]

Hallo,

Nun meine Fragen:
Kann man das mit Javascript machen?

Ja.

Gibt es da eine Sprache die besser geeignet ist?

Nein.

Gibt es irgendwo ein Tutorial wo ein blutiger Anfänger wie ich lernen kann, dieses Problem zu lösen?

Ja. Es gibt jede Menge JavaScript-Tutorials. SelfHTML erklärt JavaScript auch ganz gut.

Gibt es eventuell eine Script, mit der Lösung (man muß ja nicht jedesmal das Rad neu erfinden ;-) )?

Mouseover-Scripts und Tutorials dazu gibt es massenhaft, aber wohl kein fertiges Script, das genau die Lösung für dein Problem wäre.

Wonach muß ich suchen (Mouseover habe ich schon mal gehört, aber bisher habe ich immer den Eindruck, das hier die Ereignisse auf das Div oder die Zelle beschränkt sind, die direkt mit der Maus angewält werden)?

Bei mouseover und mouseout bist du richtig. Deine Mouseover-http://de.selfhtml.org/navigation/suche/index.htm?Suchanfrage=Eventhandler@title=Event-handlerfunktion kann dann z.B. auch die passenden DIV-Elemente (http://de.selfhtml.org/javascript/objekte/document.htm#get_elements_by_tag_name@title=getElementsByTagName) untersuchen bzw. deren http://de.selfhtml.org/javascript/objekte/all.htm#inner_html@title=innerHTML-Eigenschaften und je nach dann Inhalt <http://de.selfhtml.org/javascript/objekte/all.htm#class_name@title=CSS-Eigenschaften zuordnen>.

Gruß, Don P

[Hans]

Auch Dir danke für die Links, bin schon fleißig am lesen ;-)

Grüße,
Hans

[Matze]

Hallo Hans,

Wäre euch dankbar, wenn ihr mich in die richtige Richtung schubsen könntet (und jede weitergehende Hilfe wird auch gerne angenommen...)

zu LX' Lösungsvorschlag vielleicht noch die Idee, die Spieler, Spiele usw. nicht einfach aneinander zu schreiben, sondern in eine entsprechende Liste zu verpacken.

Ob sich dadurch das JS schwieriger gestaltet kann ich nicht beurteilen, der Semantik tut es aber keinen Abbruch.

Grüße, Matze