onclick li Farbe ändern

Du überschreibst dir bei jedem Durchlauf dein j und am Ende steht der größte Wert drin. Du müsstest die Deklaration von j in die onclick-Funktion stecken, aber dann funktioniert es immer noch nicht, weil die Zuweisung erst beim Klick ausgewertet wird und dann i wieder den maximalen Wert hat.

Die Lösung ist es, den Code in eine anonyme Funktion zu stecken und damit einen neuen Scope für jeden Schleifendurchlauf zu bekommen, in welchem die Variable dann bestand hat.

Javascript: 
for (var i = 0; i < items.length; i++)
{
        //Anonyme Funktion. Wird sofort ausgeführt und bekommt als Parameter i übergeben. Innerhalb steht es dann als j zur Verfügung.
	(function(j) {
		items[j].onclick = function ()
		{
                    if(j < 5) {
                        //...
                    }
		};
	})(i);
}
 
Soweit klapt das.
Mit dem j haben ich ja die Array position des angeklickten element gespeichert.
Ich würde gerne noch ein g mit einfügen welches das vorherige angeklickte element in dem Array noch gespeichert hat.

So sieht mein Script zut zeit aus:
Code: 
for (var i = 0; i < items.length; i++){
     (function(j){
          items[j].onclick = function (){
               if (active != null){
                    if(j < 5){
                         active.style.backgroundColor = '#E7E7E7';
                    }
                    else{
                         active.style.backgroundColor = '#323CFF';
                    }
               }
               this.style.backgroundColor = '#323CFF';
               active = this;
          };
     })(i);
}

Der Sinn dahinter ist das ich die Menus unterschiedlich formatieren kann sie aber immer noch zusammen also eins haben.

Vielen Dank schon mal
 
g kannst du ja außerhalb der Schleife deklarieren und mit "-1" initialisieren. Und am Ende der onclick Funktion setzt du g auf j.
 
Klapt natürlich!

Code: 
if(j < 5){
            this.style.backgroundColor = '#323CFF';
            this.style.color = '#FFFFFF';
        }
        else{
            this.style.backgroundColor = '#5961FF';
            this.style.color = '#FFFFFF';
        }

wenn ich nicht nur den Hintergrund sonder auch die Schriftfarbe ändern möchte reicht es dann nicht einfach this.style noch mal zu schreiben?
So klapt es nicht, die Hintergrundsfarbe wird geändert aber nicht die Schrift farbe.

Danke
 
Doch, das sollte gehen. Wie sieht denn der Rest des codes aus? Setzt du vielleicht irgendwo die Farben nochmal um?
 
Code: 
<script type="text/javascript">
/* <![CDATA[ */
var lists = [document.getElementById('main_menu'), document.getElementById('impressum_menu')];
var items = [];     //Array für alle Elemente
for(var i=0; i<lists.length; i++) {         //Alle Elemente der aktuellen Liste
    var tmpItems = lists[i].getElementsByTagName('li');
    for(var k=0; k<tmpItems.length; k++) {      //Elemente zum Array hinzufügen
        items.push(tmpItems[k]);
    }
}
var active = null; 
var g = -1;
for (var i = 0; i < items.length; i++) {
    (function(j) {   //Anonyme Funktion. Wird sofort ausgeführt und bekommt als Parameter i übergeben. Innerhalb steht es dann als j zur Verfügung.
        items[j].onclick = function () {
            if (active != null){    //Farbe des vorher geklickten zurücksetzen
                if(g < 5) {
                    active.style.backgroundColor = '#E7E7E7';   
                }
                else{
                    active.style.backgroundColor = '#323CFF';
                }            
            }
            if(j < 5) {
                this.style.backgroundColor = '#323CFF';
                this.style.color = '#FFFFFF';
            }
            else{
                this.style.backgroundColor = '#5961FF';
                this.style.color = '#FFFFFF';
            }    
            active = this;    //Das gerade geklickte Element ist jetzt das aktive
            g = j;  // Farben 5961FF 323CFF
        };
    })(i);
}
/* ]]> */
</script>

Das ist jetzt alles was ich mir mit deiner Hilfe zusammen gebastelt habe.
Es klapt auch alles, bis halt auf die Schriftfarbe.
 
Ja klar ich doofi!
Code: 
var tmpItems = lists[i].getElementsByTagName('li');
In dem li steht ja nichts das steht in dem <a> xD

Trozdem danke :)
 
Zuletzt bearbeitet:
Es hat sich noch ein größeres mir unerklärbares Problem ergeben.

Meine Scripts.
HTML: 
<style type="text/css" title="text/css" media="screen">
#main_menu li a:hover
{
    background: #5961FF;
    color: Black;
}
</style>

<div id="main_menu">
        <ul>
            <li><a  href=">Link1</a></li>
            <li><a  href=">Link2</a></li>
            <li><a  href=">Link3</a></li>
            <li><a  href=">Link4</a></li>
      </ul>                                                                                                                              
</div>
Code: 
var lists = [document.getElementById('main_menu'), document.getElementById('impressum_menu')];
    var items = [];     //Array für alle Elemente
    for (var i = 0; i < lists.length; i++) {         //Alle Elemente der aktuellen Liste
        var tmpItems = lists[i].getElementsByTagName('a');
        for (var k = 0; k < tmpItems.length; k++) {      //Elemente zum Array hinzufügen
            items.push(tmpItems[k]);
        }
    }
    var active = null;
    var g = -1;
    for (var i = 0; i < items.length; i++) {
        (function (j) {   //Anonyme Funktion. Wird sofort ausgeführt und bekommt als Parameter i übergeben. Innerhalb steht es dann als j zur Verfügung.
            items[j].onclick = function () {
                if (active != null) {    //Farbe des vorher geklickten zurücksetzen
                    if (g < 5) {
                        active.style.backgroundColor = '#E7E7E7';
                        active.style.color = '#000000';
                    }
                    else {
                        active.style.backgroundColor = '#323CFF';
                        active.style.color = '#000000';
                    }
                }
                if (j < 5) {
                    this.style.backgroundColor = '#323CFF';
                    this.style.color = '#FFFFFF';
                }
                else {
                    this.style.backgroundColor = '#5961FF';
                    this.style.color = '#FFFFFF';
                }
                active = this;    //Das gerade geklickte Element ist jetzt das aktive
                g = j;  // Farben 5961FF 323CFF
            };
        })(i);
    }

Problem:
Normalefarbe der Links #E7E7E7.
Die Links 1,2,3,4 befinden sich an erster stelle des Array d.h. j und g sind immer < 5.

Wenn ich auf Link1 (Link 1,2,3,4 völlig egal) gehe veränder sich die hintergrundfarbe durch css hover in #5961FF. Klick ich Link1 an nimm er die farbe #323CFF an welche in js steht.
Gehe ich nu über link 2 (link 2,3,4 völlig egal) verändert die Hintergrundfarbe auch via css.
Wird Link2 nun angeklickt, bekommt Link1 die hintergrundfarbe #E7E7E7 via js und Link2 #323CFF.

Bis hier hin ist auch alles richtig.
ABER wenn ich nun wieder mit der maus auf link1 gehe und dieser durch css a:hover die hintergrundfarbe annehmen müsste welche dort angegeben ist #5961FF verändert sich nichts. Kurtz gesagt wenn ein link einmal angeklcikt wurde verändert die hintergrundfarbe sich nicht mehr wenn man mit der mausein zweites mal drüber geht.

Weißt du weiter? Ich nicht =/

Vielen dank schon mal
 
Hat mit JavaScript überhaupt nichts zu tun, sondern ausschließlich mit CSS. Genau für diesen Zweck gibt es "!important".

CSS: 
#main_menu li a:hover
{
    background: #5961FF;
    color: Black !important;
}
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück