[Javascript] onmouseover definieren in forloop gaat mis

[dexonic]

Hey mensen,

ik bouw een dropdown menu op vanuit een array in JS
nu wil ik op elk hoofd-item een mouseover en mouseout event zetten en doe dat op de volgende wijze:

JavaScript:

  subMenuItems =  new Array(
                        new Array("home",          new Array("menu1", "menu1_drop")),
                        new Array("test",     new Array("test1", "test1_drop"),
                                                   new Array("test2", "test2_drop"),
                                                   new Array("test3", "test3_drop"),
                                                   new Array("test4", "test4_drop"),
                                                   new Array("test5", "test5_drop")));

  // dynamically build subs 
  for (var i = 0; i < subMenuItems.length; i++)
  {
    // hoofdactie
    if (subMenuItems[i][0] == mainMenuItem)
    {
        iInt = i;

        for (var j = 1; j < subMenuItems[i].length; j++)
        {
            jInt = j;

            if (subMenuItems[i][j].length > 1)
            {
              $(subMenuItems[i][jInt][0]).onmouseover = function ()
              {
                clearTimeout(timer);
                $(subMenuItems[i][jInt][0]).getElementsByTagName('a')[0].style.background = 'url(' + image_path + 'sub_menu_arrow_active.gif) center right no-repeat';
                openSub(subMenuItems[i][0], subMenuItems[i][jInt][0], subMenuItems[i][jInt][1]);
              }
              $(subMenuItems[i][jInt][0]).onmouseout = function ()
              {
                active[subMenuItems[i][jInt][0]] = false;
                timer = setTimeout("timedClose(subMenuItems[iInt][0])", slideDelay);
              }
              $(subMenuItems[i][jInt][1]).onmouseover = function ()
              {
                clearTimeout(timer);
                active[subMenuItems[i][jInt][0] + "_" + subMenuItems[i][jInt][1]] = true;
              }
              $(subMenuItems[i][jInt][1]).onmouseout = function ()
              {
                active[subMenuItems[i][jInt][0] + "_" + subMenuItems[i][jInt][1]] = false;
                timer = setTimeout("timedClose(subMenuItems[iInt][0])", slideDelay);
              }
            }
            else
            {
                // sub heeft geen dropdown
              $(subMenuItems[i][jInt][0]).onmouseover = function ()
              {
                $(subMenuItems[i][jInt][0]).getElementsByTagName('a')[0].style.background = 'url(' + image_path + 'sub_menu_arrow_active.gif) center right no-repeat';
                closeOthers(subMenuItems[iInt][0], subMenuItems[i][jInt][0]);
                active[subMenuItems[i][jInt][0]] = true;
                state[subMenuItems[i][jInt][0]] = true;
              }
              $(subMenuItems[i][jInt][0]).onmouseout = function ()
              {
                $(subMenuItems[i][jInt][0]).getElementsByTagName('a')[0].style.background = 'url(' + image_path + 'sub_menu_arrow.gif) center right no-repeat';
                active[subMenuItems[i][jInt][0]] = false;
                state[subMenuItems[i][jInt][0]] = false;
              }
            }
        }
        break;
    }
  }

ben al aan het prutsen geweest omdat js dus bepaalde vars niet meer kent als je dat in een nieuwe functie zet vandaar de jInt en iInt etc..

het probleem is dus dat als de for loop klaar is en het menu bij test heeft bijv 5 subitems alle events betrekking hebben op de div met het id test5..
op de een of andere manier koppelt hij dus elke mouseover aan de laatste div in de array en niet op elke div apart wat dus zou moeten..

iemand hier een oplossing voor oid, want zit me een beetje dood te staren op deze code

Code kan tegenwoordig ook talen bevatten

[ Voor 0% gewijzigd door BtM909 op 22-03-2007 11:52 ]

[dexonic]

dexonic schreef op donderdag 22 maart 2007 @ 11:48:
[mbr]Code kan tegenwoordig ook talen bevatten ;)[/]

thx

[BtM909]

Overigens even qua performance, waarom maak je geen classes aan en switch je de classes ipv inline css toe te passen?

Waarom gebruik je anonymous functions. je geeft toch geen extra parameters mee, dus ik zou 4 losse functies aanmaken en daarnaar verwijzen.

Daarnaast snap ik niet waarom je met extra variabele werkt, waarom werkte dat niet precies?

*gebruik je trouwens een JS lib?*

Zal na m'n lunch even kijken of ik een werkende opzet kan maken

[Alex Picard]

op de een of andere manier koppelt hij dus elke mouseover aan de laatste div in de array en niet op elke div apart wat dus zou moeten..

jInt is een globale variabele, jij koppelt dus zelf alle anonymous functions hieraan.

Het valt me ook op dat je de variabele iInt niet gebruikt maar gewoon i... dat werkt wel?

Het lijkt me een scope en binding probleem (je wil dat de anonymous function de dan geldende waarde overneemt, en niet refereert aan de variabele die steeds verandert)

Just my two cents, misschien helpt het jou of iemand anders tot de oplossing. Veel succes!

[dexonic]

waarom maak je geen classes aan en switch je de classes ipv inline css toe te passen?

omdat er een delay op moet zitten.. en er nog andere dingen moeten gebeuren..
en het enige inline css wat ik gebruik is die bg image.. die kan idd in de css als :hover maar ik was met andere dingen bezig vandaar dat dit erin stond

ik gebruik prototype en scriptaculous, maar maak hier alleen gebruik van $ functionaliteit van prototype

Daarnaast snap ik niet waarom je met extra variabele werkt, waarom werkte dat niet precies?

JavaScript:

              $(subMenuItems[i][jInt][0]).onmouseover = function ()
              {
                clearTimeout(timer);
                $(subMenuItems[i][jInt][0])

als ik gewoon i en j gebruik herkent hij in bovenstaande code bij $(subMenuItems[i][jInt][0]) i en j niet meer...
deze code werkt dus al sowieso niet...
binnen de functie kent hij i en j niet meer, ik heb daarom 2 globals gedefinieerd en die update ik dus in de for loop, zodat hij ook binnen de functie bekend is...
dat werkt dus wel alleen is het dan zo dat die global tijdens de mouse-overs als reference werkt en dus alleen de laatste waarde aanneemt?
want dat is wat er gebeurd en wat alex ook zegt..
ik ga ff verder.. thx voor de replies

i'll let you know

[dexonic]

even ter verduidelijking:

JavaScript:

  for (var i = 0; i < subMenuItems.length; i++)
  {
    // hoofdactie
    if (subMenuItems[i][0] == mainMenuItem)
    {
        for (var j = 1; j < subMenuItems[i].length; j++)
        {
            if (subMenuItems[i][j].length > 1)
            {
                alert(i + " erbuiten " + j); 
              $(subMenuItems[i][j][0]).onmouseover = function ()
              {
                alert(i + " binnen " + j); 
                clearTimeout(timer);

dit is dus zonder die globals

als ik het tweede menu initialiseer krijg ik dus de alerts
1 erbuiten 1
1 erbuiten 2
1 erbuiten 3
1 erbuiten 4
1 erbuiten 5

dat is dus goed

bij een mouseover op 1 van de divs alert hij
1 binnen 6

wat dus de waarde van j is op het moment dat hij klaar is..

iemand een oplossing hiervoor?

[dexonic]

opgelost

was achteraf niet nodig om j te kennen in de functie omdat je vanaf daar gewoon met this kan werken..
subMenuItems[i][j][0] binnen de functie is this.id

bedankt voor de hulp iig

[crisp]

dexonic schreef op donderdag 22 maart 2007 @ 15:37:
opgelost

was achteraf niet nodig om j te kennen in de functie omdat je vanaf daar gewoon met this kan werken..
subMenuItems[i][j][0] binnen de functie is this.id

bedankt voor de hulp iig

Waarmee je functie dus statisch is geworden en je daar beter een echt functie-object van kan maken en naar refereren ipv tig anonymous functies aan te maken

[dexonic]

hmm zal er morgen nog es naar kijken...
hoe zou jij het dan doen als ik het vragen mag?

[crisp]

dexonic schreef op donderdag 22 maart 2007 @ 23:49:
hmm zal er morgen nog es naar kijken...
hoe zou jij het dan doen als ik het vragen mag?

Ik ga meestal uit van de markup, dan krijg je zoiets: http://therealcrisp.xs4all.nl/upload/menu.html

[dexonic]

k.. thx voor het vb

altijd handig natuurlijk