Question

假设我想在我的页面中为框创建一个Javascript类。当创建该类的对象时，我想向其添加一个click事件，这将要求我访问其中一个或多个唯一属性。我该怎么办？这是一个例子：

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

您无法在onclick事件中访问Box的属性。如果您想存储html元素的数据，则必须使用http://api.jquery.com/jquery.data/。顺便说一句，下面的代码可能适合您。

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

Answer 2

有两种方法：

1）在变量中保留对此的引用并使用：

// 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）或者将点击回调绑定到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

首先，您可以bind运行以获得正确的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));

还要考虑使用略有不同的方法

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)    
}

Javascript对象属性的范围

3 个答案: