Brauche Hilfe bei JavaScript

[Amarik]

Hi,

ich hoffe ihr könnt mir helfen...

Ich habe folgenden Code

<div class="a" onmouseover="getElementByClassName('b').setAttribute('class', 'c')" onmouseout="getElementByClassName('c').setAttribute('class', 'a')">
<div class="b"></div>
</div>
<div class="a" onmouseover="getElementByClassName('b').setAttribute('class', 'c')" onmouseout="getElementByClassName('c').setAttribute('class', 'a')">
<div class="b"></div>
</div>
<div class="a" onmouseover="getElementByClassName('b').setAttribute('class', 'c')" onmouseout="getElementByClassName('c').setAttribute('class', 'a')">
<div class="b"></div>
</div>

Im grunde soll die Klasse des inneren Div´s sich in "c" ändern, wenn man mit der Maus im div mit der Klasse "a" fährt und wenn man das Div verlässt wieder die Ursprungsklasse "b" bekommen.
Mit getElementByID hat es ansatzweise geklappt, nur dass sich immer das "b"-Div im ersten "a"-Div geändert hat und nicht in den entsprechenden Div´s.
Verschiedene ID´s kann ich leider auch nicht vergeben.

Ich hoffe das war alles soweit verständlich und mir kann jemand helfen...

Vielen Dank schonmal im Vorraus,
Amarik

[Kelshan]

Die Funktion "getElementByClassName" läuft halt global, durchsucht also alle auf der Seite definierten class-Attribute. Wenn es da dann mehrere Elemente mit dem gleichen class gibt, gibt die Funktion eben das erste zurück, das sie findet. Daher ändert sich immer nur die Klasse im ersten div.

Ich weiß ja nicht welchen Zweck das Ganze hat und wie das drumherum aussieht. Aber um ein bestimmtes Element so zu ändern, muss dieses Element auf irgendeine Weise eindeutig identifiziert werden können. Sei es durch eine eindeutige ID, sei es weil jedes "class" nur einmal verwendet wird (es also nur ein div mit class b gibt, eins mit class c, usw.) oder sei es, indem du statt diese Funktion zu verwenden eher direkt irgendwie auf die Kindelemente des jeweiligen a-Divs zugreifst (lange kein JS gemacht, kann also nicht sicher sagen ob/wie letzteres zu machen wäre).

[Dr.Bock]

Ich würde gar nicht inline arbeiten, sondern den Code in einen Script-Tag oder eine JS-Datei auslagern. Reines Javascript habe ich schon ewig nicht mehr standalone benutzt. Je nachdem was du noch so vor hast, empfiehlt es sich auch eine JS-Bibliothek wie z.B. jQuery zu verwenden (jQuery: The Write Less, Do More, JavaScript Library). Damit würde es z.B. so aussehen (ungetestet, und hoffe habe dein Vorhaben richtig verstanden):

$(document).ready(function() {
  
  $(".a").hover(
  function () {
    $(this).children('.b').addClass("c");
  },
  function () {
    $(this).children('.b').removeClass("c");
  }
);
  
});

Geht auch noch schlanker, aber so wohl am verständlichsten. (Wenn die Klasse "b" auch noch verschwinden soll, einfach noch mit removeClass arbeiten.

---

Mittlerweile gehen kleine Hover-Funktionen auch übrigens wunderbar mit CSS3/HTML5. Da braucht man nicht mehr für jeden Kleinkram JS (vorausgesetzt man kann auf Abwärtskompatibilität verzichten).

Muss jetzt los, sonst würde ich noch mehr ausholen

[Amarik]

Hi,

danke für eure Hilfe. Ich habe festgestellt, dass ich viel zu kompliziert gedacht habe... .a:hover b {} im CSS reicht auch...

Leider habe ich jetzt nur noch das Problem mit der Positionierung, da ich selten bis gar nicht mit position arbeite (eher mit float)... aber da werd ich sicher eine Lösung finden...

Danke und Gruß,
Amarik