[JS] this.tabItems is undefined terwijl hij gewoon bestaat

[devhouse]

Hallo allemaal,

Ik ben de druk bezig om een begin te maken met closures in Javascript. Ik heb dit nu aardig onder de knie, en heb zelf al een aantal problemen opgelost. Helaas ben ik nu al een erg lange tijd aan het peinzen onder een fout, die ik niet kan oplossen. De fout betreft een variabele, waarvan ik zeker weet dat die bestaan. Deze variabele bestaat wel, maar wordt beschouwd als unfinded. De fout zit in de ondestaande code:

JavaScript:

var devHouse = function(){


    this.tabWidget = function(tabItems, selectedTabItem, tabImageId, tabTextId, tabTextIdContainer){
        this.tabItems = tabItems;
        this.selectedTabItem = selectedTabItem;
        this.tabWidgetImageID = tabImageId;
        this.tabWidgetTextID = tabTextId;
        this.tabWidgetTextIdContainer = tabTextIdContainer;
    }
    
    this.startTabWidget = function(){
        $("" + this.tabWidgetImageID + "").css("background-image", "url('" + this.tabItems[this.selectedTabItem][2] + "')");
        $("" + this.tabWidgetTextID + "").html('<strong>' + this.tabItems[this.selectedTabItem][0] + '</strong><br/>' + this.tabItems[this.selectedTabItem][1] + '');
    }
    this.nextTab = function(){
        var newTabItem = this.selectedTabItem + 1
        if (newTabItem >= this.tabItems.length) 
            newTabItem = 0;
        
        $("" + this.tabWidgetTextIdContainer + "").fadeOut(300);
         alert( this.tabItems[newTabItem][1]  ); // Werkt gewoon wel
        $("" + this.tabWidgetImageID + "").fadeOut(300, function(){
            alert( this.tabItems[newTabItem][1]  ); //Debug, ook unfinded
//hieronder zit de fout
            $("" + this.tabWidgetImageID + "").css("background-image", "url('" + this.tabItems[newTabItem][1] + "')").fadeIn(300);
        });
        
        $("" + this.tabWidgetTextID + "").fadeOut(300, function(){
        
            $("" + this.tabWidgetTextID + "").html('<strong>' + this.tabItems[newTabItem][0] + '</strong><br/>' + this.tabItems[newTabItem][1] + '');
            $("" + this.tabWidgetTextIdContainer + "").fadeIn(500);
            $("" + this.tabWidgetTextID + "").fadeIn(500);
        });
       
        this.selectedTabItem = newTabItem;
    }
}

Op regel 26 staat this.tabItems[newTabItem][1], ik weet dus zeker dat dit bestaat, maar dat doet het dus niet. Natuurlijk heb ik ook even gekeken of hij ergens anders werkt, en dat doet hij wel, boven de effects-functie(boven regel 23) werkt hij dus wel.

Weet iemand misschien hoe ik dit kan oplossen, ik heb namelijk geen idee.

Tom

[Norckon]

Komt omdat je probeert te refereren naar 'this' binnen de anonieme functie die (geloof ik?) uitgevoerd wordt na de fadeOut. Het object verwijst dan niet meer naar je klasse, maar naar het object waarop het effect wordt uitgevoerd.
Binnen veel JS frameworks kun je anonieme functies het 'this' object meegeven (in MooTools met function() { ... }.bind(<object>)). Als dat in jou geval niet kan, probeer dan voor de anonieme functie het this object op te slaan in een variabele, welke je vanuit de anonieme functie vervolgens gebruikt om je object te benaderen.

[dB90]

var self = this