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 に答える