referencing this inside a function

Given the code (a lot of it stripped out)

// A data set
$.DataArea = function() {

    // Default options
    $.extend(this, {
        'class': "DataSet",
        'bars': new Array(),
        'container': null,
        'containerId': null,
        'gridsize': 20,
        'width': 400,
        'height': 400,
        'currentSelectedBar': 0
    });

    // Add a bar to this object
    this.addBar = function(startDate, endDate, label, styleID) {

        // When the bar is clicked
        $('#' + barID).click(function() {

            alert($(this).currentSelectedBar);
            if (this.currentSelectedBar != undefined)
                $('#' + this.currentSelectedBar).fa开发者_开发百科deIn("slow");

            this.currentSelectedBar = barID;
                $('#' + barID).fadeTo("slow", 0.5);

        });
    }

When I alert($(this).currentSelectedBar); it always comes out as undefined, it's not setting the value properly. Any ideas why this might be?

The idea is when you click on a bar, it fades it out, and when you click another the last bar to fade out fades in as well.

---

Assuming you are calling addBar on an instance of DataArea, your code should be:

// Add a bar to this object
this.addBar = function(startDate, endDate, label, styleID) {
    var self = this;
    // When the bar is clicked
    $('#' + barID).click(function() {

        alert(self.currentSelectedBar);
        if (self.currentSelectedBar != undefined)
            $('#' + self.currentSelectedBar).fadeIn("slow");

        self.currentSelectedBar = this.id;
        $(this).fadeTo("slow", 0.5);
    });
}

Inside the click handler, this will refer to the DOM element '#' + barID. But the properties are assigned to some other element and not that DOM element.

---

The this in your callback function refers to the element that rises the event : in that case $('#' + barID). I guess you want to access the this that you extended. In that case, you should write something like that :

this.addBar = function(startDate, endDate, label, styleID) {
    var self = this

    // When the bar is clicked
    $('#' + barID).click(function() {

        alert($(self).currentSelectedBar);
        if (self.currentSelectedBar != undefined)
            $('#' + self.currentSelectedBar).fadeIn("slow");

        self.currentSelectedBar = barID;
        $(this).fadeTo("slow", 0.5);

    });
}

---

    var that = this;
    $('#' + barID).click(function() {

        alert(that.currentSelectedBar);
        if (that.currentSelectedBar != undefined)
            $('#' + this.currentSelectedBar).fadeIn("slow");

        that.currentSelectedBar = barID;
            $('#' + barID).fadeTo("slow", 0.5);

    });

Cache the value of this outside the click function. inside the click function, the context this is the DOM node that was clicked.

---

It looks like you're having an issue with the behavior of jQuery.

$('#' + barID).click(function() { remaps the definition of this, but having attempted to add attributes to it previously will have no effect because the definition of this has been overwritten.

As mentioned by recmashak you can put the original this into a variable and then use it when you do your alert