Don't make functions within a loop.

Loop

Hi at all

bin grad dabei nen JavaScrip zu optimieren mit hilfe des JSLint und verzweifle grad an an einigen Sachen.

Hier in Zeile 74

Code

sfHover = function() {
	var sfEls = document.getElementById("menu").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";


		sfEls[i].onmouseout=function() {
		this.className-=" sfhover";

	/*	   var suche = RegExp(" sfhover\\b");
			suche == "";
			this.className = this.className.suche;*/
	  };
	}; //Zeile 74
  }
};

Alles anzeigen

und hier in zeile 90

Code

Over = function() {
	var sfEls = document.getElementById("menu").getElementsByTagName("UL");
	for (var i=0; i<sfEls.length; i++) 
	{
		sfEls[i].onmouseover=function() {
			this.className+=" over";


		sfEls[i].onmouseout=function() {
	};       this.className = "bild";		
	  }; //Zeile 90
	}
  };

Alles anzeigen

zeigt der mir: Don't make functions within a loop.

Währe cool wenn mir jemand hierbei jemand helfen könnte

The User

Ist doch ganz einfach: Mach globale Funktionen draus und gib ihnen Namen.
Es macht auch keinen Sinn, onmouseout erst zu setzen, wenn onmouseover ausgelöst worden ist. Das macht der schon von selbst richtig. Also einfach zwei unabhängige Funktionen für onmouseout und onmouseover und in der Schleife machst du dann so etwas wie:

Code

sfEls[i].onmouseover = funktion1;
sfEls[i].onmouseout = funktion2;

Viele liebe Grüße
The User

jojo87

An sich ist es doch auch sehr nett, dass er dich den Code nicht ausführen lässt.
Sonst ballerst du den Client ja mit nem Haufen anonymen Funktionen zu, die alle das selbe machen

synaptic

mit jquery is des was du haben willst auch ganz fix gemacht..
siehe: each(), toggleClass()

edit: each brauchts da noch nichma..
es reicht addClass, removeClass oder eben toggleClass

The User

synaptic
So lang ist der Code doch nun wirklich nicht, den er da so geschrieben hat.

synaptic

ich hätt des zwar so gemacht:

html:

HTML

<div id="menu">
    <ul>
        <li class="menli">blubb</li>
        <li class="menli">blubb</li>
        <li class="menli">blubb</li>
        <li class="menli">blubb</li>
    </ul>
</div>

css:

Code

.menli{
    width:200px;
    border: 1px solid black;
    background:red;
    color: black;
    padding-left:20px;
}
.active{
    width:210px;
    border: 2px solid red;
    background:black;
    color: white;
}

Alles anzeigen

jquery version1:

Code

$("#menu").ready(function(){
    $("li.menli").mouseover(function(){
        $(this).toggleClass("active");
    });
    $("li.menli").mouseout(function(){
        $(this).toggleClass("active");
    });
});

oder eben mit addClass und removeClass
jquery version2:

Code

$("#menu").ready(function(){
    $("li.menli").mouseover(function(){
        $(this).addClass("active");
    });
    $("li.menli").mouseout(function(){
        $(this).removeClass("active");
    });
});

aber ich sehe ein, dass sein code oben unwesentlich mehr geschreibse wäre...
aber ok ich geb mich geschlagen... macht des so wie oben und wenns nich fruchtet viel erfolg bei der fehlersuche...

The User

Ah, aber auch mal interessant zu sehen, wie so etwas in jQuery aussieht.

Don't make functions within a loop.

Tags

Benutzer online in diesem Thema