0

我有这样的事情：

var Tset = function(){
     this.a = $('div').text("lorem ipsum ..").appendTo('#a1');
     $(this.a).mouseover(function(){
              this.setBackground('red');
     });  
     this.setBackground = function(_color){
        $(this.a).css({'background-color':'color'});
        }
}

var x = new Tset();

我的问题是我不能this.setBackground从mouseover回调函数调用。我怎么解决这个问题？谢谢！

4

2 回答 2

5

是的，回调内部this指的是元素而不是实例的上下文。所以尝试缓存this。

var Tset = function () {
    var self = this; //<-- cache this to be used later
    this.a = $('div').text("lorem ipsum ..").appendTo('#a1');
    $(this.a).mouseover(function () {
        self.setBackground('red'); //invoke it with self
    });
    this.setBackground = function (_color) {
        $(this.a).css({
            'background-color': _color
        });
    }
}

var x = new Tset();

还有其他与此类似的可用技术，即使用 Ecmascript5 function.bind、$.proxy等。

使用绑定函数：

 var Tset = function () {

     this.a = $('div').text("lorem ipsum ..").appendTo('#a1');
     $(this.a).mouseover((function () {
         this.setBackground('red'); //Now this will be your instanc's context
     }).bind(this)); //bind the context explicitly  
     this.setBackground = function (_color) {
         $(this.a).css({
             'background-color': _color
         });
     }
 }

除绑定函数外，调用者确定回调内部的上下文

小提琴

于 2013-10-01T14:48:20.463 回答
2

在 jQuery 事件处理程序中，this设置为发生事件的元素。

但是，在绑定回调的父函数中，您可以声明另一个变量来存储该函数的this，并在回调中引用该变量。

像这样：

var Tset = function(){
    var that = this;// Declare another variable to store the parent function's "this" value.

     this.a = $('div').text("lorem ipsum ..").appendTo('#a1');
     $(this.a).mouseover(function(){
              that.setBackground('red');// And refer to that variable in your callback.
     });
于 2013-10-01T14:49:35.190 回答