对象属性的Javascript范围

Question

Let's say I want to make a Javascript class for boxes in my page. When an object of that class is made, I want to add a click event to it that would require me accessing one or many of its unique properties. How would I do that? Here's an example:

function Box(boxClassName, originalColor, changeColor){

this.boxClassName = boxClassName;
this.originalColor = originalColor;
this.changeColor = changeColor;

this.initialize = function (){

    var html = '<div class="' + this.boxClassName + '></div>';

    $(document).append(html);
    $(this.boxClassName).css("background-color", originalColor);

    // Toggle box color on click
    $(this.boxClassName).click(function (){
        // this.boxClassName is undefined here, none of this works

        if ($("." + this.boxClassName).css("background-color") == originalColor) {
            $("." + this.boxClassName).css("background-color", this.changeColor);
        } else {
            $("." + this.boxClassName).css("background-color", this.originalColor);
        }
    });
};

this.initialize();

}

Answer 1

You cannot to access property of Box in onclick event. If you would like to store data of html element, you have to use http://api.jquery.com/jquery.data/ . By the way, below code might work for you purpose.

if ($(this).css("background-color") == originalColor) {
    $(this).css("background-color", this.changeColor);
} else {
    $(this).css("background-color", this.originalColor);
}

Answer 2

There are two ways:

1) Keep a reference to this in a variable and use that:

// Toggle box color on click
var self = this;
$(this.boxClassName).click(function () {
    if ($("." + self.boxClassName).css("background-color") == originalColor) {
        $("." + self.boxClassName).css("background-color", self.changeColor);
    } else {
        $("." + self.boxClassName).css("background-color", self.originalColor);
    }
});

2) Or bind the click callback to the Box

$(this.boxClassName).click(function () {
    if ($("." + this.boxClassName).css("background-color") == originalColor) {
        $("." + this.boxClassName).css("background-color", this.changeColor);
    } else {
        $("." + this.boxClassName).css("background-color", this.originalColor);
    }
}.bind(this));

Answer 3

First of all, you can bind function to get proper this

$(this.boxClassName).click(function (){
    // this.boxClassName is now defined here

    if ($("." + this.boxClassName).css("background-color") == originalColor) {
        $("." + this.boxClassName).css("background-color", this.changeColor);
    } else {
        $("." + this.boxClassName).css("background-color", this.originalColor);
    }
}.bind(this));

Also consider using slightly different approach

function Box(boxClassName, originalColor, changeColor) {

    var changedBg = false, div = $('<div />'), handler = function ( e ) {
      $(this).css('background-color', changedBg ? originalColor : changeColor)
      changedBg = !changedBg
    }

    div.addClass(boxClassName)on('click', handler).appendTo(document)    
}