javascript - Jquery variable not instantiated until click event -

problem: element not 'maxing' until user double clicks on red square.

basically variable 'clicked' being instantiated onclick instead of being instantiated before hand. resulting behavior user has click once 'clicked' variable instantiated , function works desired.

here jsfiddle

and important sections of code:

var container = $(this).parents('.container'); var paragraph = $(container).find('.text'); if (this.clicked == 0) {     container.removeclass("large-4");     container.addclass("large-8");     paragraph.removeclass("hide");     this.clicked = 1; } 

any appreciated thanks!

details (don't have read :d):

the reason i'm doing inverted selection (selecting child element , parent element) because there many of these '.container' elements , each 1 needs have same respective min/max functionality clicking on minmax icon.

obviously method not referencing single local 'clicked' class variable. doesn't make sense each element requires own 'clicked' variable.

if there better way of doing i'm open anything, nice figure specific problem out overall understanding of jquery.

i'm using foundation's framework on project familiar class names.

i have odd feeling has closure, yea...don't know enough js or jquery figure 1 out.

in jquery event handler this refers object triggered event. in click callback, this no longer refers instance of artist. around this, can create variable that , set artist instance. javascript closures, can refer that , still have access instance.

working demo

artist.clickhandler = function () {     var = this;     //this.clicked undefined until event fired     that.clicked = 0;     $('.minmax').click(function () {         if (typeof that.clicked === 'undefined') {             console.log("that.clicked undefined");         } else {             console.log("that.clicked defined");         }         //rest of handler here     }); };