[JS] Variabele in object method in for-loop gebruikt laatste

[Verwijderd]

Beste mensen,

ik heb de volgende functie geschreven (en getest in Firefox 1.0 en IE 6)

JavaScript:

// --------------------------------------
// loads menu rollover images in browser cache
// --------------------------------------
function load_menuRollovers()
{
    if (document.getElementById && document.getElementsByTagName) {
        var nav = document.getElementById( "nav" );
        if (nav != null) {
            var imgPaths = new Array ;
            for (var i = 0; i < nav.childNodes.length; i++) {
                if (nav.childNodes[i].nodeName == "LI") {
                    var anchor    = nav.childNodes[i].getElementsByTagName( "a" ).item(0);
                    var btn_image = anchor.getElementsByTagName( "img" ).item(0) ;
                    var path      = btn_image.getAttribute( "src" );
                    var path_over = path.replace(".jpg", "-over.jpg");
                    imgPaths[imgPaths.length+1] = path_over ;

                    //alert( btn_image.getAttribute("src") );
                    btn_image.onmouseover = function() { this.setAttribute("src", path_over); return false; }
                    btn_image.onmouseout  = function() { this.setAttribute("src", path); return false; }
                }
            }
            if (imgPaths.length > 0) {
                preloadImages( imgPaths );
            }
        }
    }
}

Nou loop ik tegen het volgende probleem aan:

De variabelen path en path_over worden telkens vervangen in de for-loop, waardoor alle plaatjes die ik hiermee een onmouseover en onmouseout functie geef de waarde gebruiken van het laatste element dat door de for-loop gaat.
Ik snap niet hoe dit kan en hoe ik dit kan verhelpen, kan iemand me misschien wijzen richting oplossing?
Hoop dat ik het een beetje duidelijk heb uitgelegd...

Alvast bedankt!

[André]

Dat komt omdat je de onmouseover van alle plaatjes overschrijft, probeer het eens zo:

code:

btn_image.onmouseover = new Function() { this.setAttribute("src", path_over); return false; }
btn_image.onmouseout  = new Function() { this.setAttribute("src", path); return false; }

Of anders zo:

code:

btn_image.onmouseover = function() { doe(this, path_over); }
btn_image.onmouseout  = function() { doe(this, path); }

function doe(obj, pad)
{
  obj.setAttribute("src", pad);
  return false;
}

[ Voor 38% gewijzigd door André op 26-01-2005 00:43 ]

[Verwijderd]

Bedankt voor je reactie, André.

Bovenste werkt niet vanwege de incorrecte syntax, dus ik heb het volgende geprobeerd:

JavaScript:

btn_image.onmouseover = new Function( "", "this.setAttribute('src', path_over); return false;" );
btn_image.onmouseout  = new Function( "", "this.setAttribute('src', path); return false;" );

Werk niet omdat path en path_over niet globaal gedefinieert zijn, en als ik dat doe dan krijg ik weer hetzelfde probleem.

Onderste oplossing is min of meer een andere notitie van hetzelfde probleem wat ik met mijn functies heb... Vanwege de verkeerde waarden van path en path_over...

Moet ik de referentie naar de eerdere <a> tags unsetten of zoiets?

[ Voor 25% gewijzigd door Verwijderd op 26-01-2005 00:53 ]

[Verwijderd]

Verschillende variabelen/-array elementen- gebruiken voor de verschillende anchors doet ook niks...

JavaScript:

var btnImages = new Array ;
var imgPaths  = new Array ;
for (var i = 0; i < nav.childNodes.length; i++) {
    if (nav.childNodes[i].nodeName == "LI") {
        var anchor   = nav.childNodes[i].getElementsByTagName( "a" ).item(0);
        btnImages[i] = anchor.getElementsByTagName( "img" ).item(0) ;
        path         = btnImages[i].getAttribute( "src" );
        path_over    = path.replace(".jpg", "-over.jpg");
        imgPaths[imgPaths.length+1] = path_over ;

        //alert( btn_image.getAttribute("src") );
        btnImages[i].onmouseover = function() { this.setAttribute('src', path_over); return false; }
        btnImages[i].onmouseout  = function() { this.setAttribute('src', path); return false; }
    }
}

[ Voor 25% gewijzigd door Verwijderd op 26-01-2005 01:14 ]

[André]

Ik heb eens in eigen code gekeken en daar zie ik dat ik het ook zo doe, maar dan zonder return false, probeer dat eens

Deze code bedoel ik, het doet ongeveer hetzelfde als wat dat van jou doet:

code:

  for (i=0; i < obj.childNodes.length; i++)
  {
    node = obj.childNodes[i];
    if (node.nodeName == "LI")
    {
      node.onmouseover = function() { this.className += " over"; }
      node.onmouseout = function() { this.className = this.className.replace(" over", ""); }
    }
  }

[ Voor 62% gewijzigd door André op 26-01-2005 01:19 ]

[Verwijderd]

Het ligt helaas niet aan return false;
Volgens mij ligt het dus aan het feit dat ik op de verkeerde manier de variabele path en path_over in de functie definities van de onmouseover en onmouseout van de plaatjes doorgeef...

Ik zou niet weten hoe ik het op een andere (goeie/werkende) manier kan doorgeven terwijl ik wél de goeie src houd.

JavaScript:

btn_image.onmouseover = function() { this.setAttribute("src", path_over); return false; }
btn_image.onmouseout  = function() { this.setAttribute("src", path); return false; }

[ Voor 7% gewijzigd door Verwijderd op 26-01-2005 01:38 ]

[Woudloper]

Wat gebeurd er als je gaat debuggen en bijvoorbeeld alleen deze code uitvoert voor één image?

JavaScript:

this.setAttribute("src", path_over)

Heb je dan ook hetzelfde probleem?

[Clay]

Je kan vanuit de for loop een functie aanroepen en daaraan oa path en path_over meegeven. In die andere functie kan je dan mouseover en mouseout events toewijzen zonder dat de variabelen door de volgende for iteratie overschreven worden.

[Verwijderd]

Clay schreef op woensdag 26 januari 2005 @ 09:26:
Je kan vanuit de for loop een functie aanroepen en daaraan oa path en path_over meegeven. In die andere functie kan je dan mouseover en mouseout events toewijzen zonder dat de variabelen door de volgende for iteratie overschreven worden.

Ik had voorheen geprobeerd naar André's voorbeeld dit te doen, maar toen had ik de functie setRollOver() ín de for-loop gedefinieerd, dit werkte niet.

Nu heb ik de functie setRollOver() buiten de for-loop en buiten de functie gedefinieerd, en nu werkt het wel.

JavaScript:

function setRollOver(obj, path, path_over)
{
    if (obj != null) {
        obj.onmouseout  = function() { this.setAttribute('src', path); }
        obj.onmouseover = function() { this.setAttribute('src', path_over); }
    }
}

// --------------------------------------
// loads menu rollover images in browser cache
// --------------------------------------
function load_menuRollovers()
{
    if (document.getElementById && document.getElementsByTagName) {
        var nav = document.getElementById( "nav" );
        if (nav != null) {
            var btnImages = new Array ;
            var imgPaths  = new Array ;
            for (var i = 0; i < nav.childNodes.length; i++) {
                if (nav.childNodes[i].nodeName == "LI") {
                    var anchor = nav.childNodes[i].getElementsByTagName( "a" ).item(0);
                    btn_image  = anchor.getElementsByTagName( "img" ).item(0) ;
                    path       = btn_image.getAttribute( "src" );
                    path_over  = path.replace(".jpg", "-over.jpg");
                    imgPaths[imgPaths.length+1] = path_over ;

                    setRollOver(btn_image, path, path_over);
                }
            }
            if (imgPaths.length > 0) {
                preloadImages( imgPaths );
            }
        }
    }
}

Bedankt voor de hulp!

[ Voor 8% gewijzigd door Verwijderd op 26-01-2005 15:13 ]

[André]

Verwijderd schreef op woensdag 26 januari 2005 @ 15:13:
[...]

Ik had voorheen geprobeerd naar André's voorbeeld dit te doen, maar toen had ik de functie setRollOver() ín de for-loop gedefinieerd, dit werkte niet.

Nu heb ik de functie setRollOver() buiten de for-loop en buiten de functie gedefinieerd, en nu werkt het wel.

Nu ik het zo zie, zie ik ook waar ik de denkfout maakte. Soms kan het zo simpel zijn