Global variable within JavaScript function

Question

I have the following code:

function timeLine (wrapper,slider,boxwidth,labels,labelWdth) {
    this.wrapper = wrapper;
    this.slider = slider;
    this.boxwidth = boxwidth;
    this.labels = labels;
    this.labelWdth = labelWdth;

    this.setupBlocks = function(){          
        $(this.wrapper+' .blocks').each(function(){
            // Get longest block for some reason this causes us problems!
            newWidth = $(this).data('cover') * this.boxwidth;

            $(this).width(newWidth+'px');
            $(this).css('margin-left',$(this).data('left') * this.boxwidth+'px');
        })  
    }

The problem I am finding is that the this.boxwidth variable within the setupBlocks function is returning NULL.

If I defined these properties at a function level shouldn't this.variable still be available?

I guess the jQuery each is overwriting that, so how can I set the this. list as completely global?

I thought you had to have this for JS classes in this format (as per http://www.phpied.com/3-ways-to-define-a-javascript-class/ which I was using as I normally don't do Classes with JS).

Looks like you need to `bind` the function passed to `each`. — Davin Tryon, Mar 10 '16 at 14:58
@zzzzBov this may be a duplicate. But I don't think it is a duplicate of a question about closures. — Davin Tryon, Mar 10 '16 at 14:59
This is not a duplicate - the question is not about closures its about classes. I don't see this. within that linked question. Yes Davin I agree. — uk2016, Mar 10 '16 at 15:00
@DavinTryon, crap, wrong link, hang on let me go find the right one — zzzzBov, Mar 10 '16 at 15:07
@uk2016, it *is* a duplicate, but not of the one I linked to: http://stackoverflow.com/q/346015/497418 is a better duplicate. — zzzzBov, Mar 10 '16 at 15:08
@uk2016 It is becoming more idiomatic to use `.bind(this)` instead of `var self = this`. FYI. — Davin Tryon, Mar 10 '16 at 15:26

Global variable within JavaScript function

0 Answers0