如何在 jQuery 对象中使用 'self'？

Question

我制作了简单的变色函数并将其组织为对象。但是如何在对象中使用 self 呢？

这是我制作的对象，第一个和第二个工作正常，而第三个不工作..

var Color = {
    textColor:function (color){
        $('body').css('color', color);
    },
    backgroundColor:function (color){
        $('body').css('backgroundColor', color);
    },
    inputColor:function (color){
        $(self).css('backgroundColor', color);
    }
}

如果我使用注释掉的查询，它会在 Color.inputColor('color') 不工作时运行良好。我想把它组织成对象。

function highlightInput(self){
    $(document).ready(function(){
        // $(self).css('backgroundColor', 'lightyellow');
        Color.inputColor('lightyellow');
        $(self).blur(function(){
            // $(self).css('backgroundColor', 'white');
            Color.inputColor('white');
        });
    });
}

提前致谢！

Answer 1

最简单的解决方案是将其作为参数传递给 inputColor（以及 Color 的任何其他需要引用 self 的函数）：

var Color = {
    textColor:function (color){
        $('body').css('color', color);
    },
    backgroundColor:function (color){
        $('body').css('backgroundColor', color);
    },
    inputColor:function (color, self){
        $(self).css('backgroundColor', color);
    }
}

和

function highlightInput(self){
    $(document).ready(function(){
        Color.inputColor('lightyellow', self);
        $(self).blur(function(){
            Color.inputColor('white', self);
        });
    });
}

Answer 2

self 不是有效变量。您正在尝试使用 this.

你有两种解决方法：

1) 通过在外部声明属性 self 并将其用于您的函数：

var Color = {
  self: this,
  textColor:function (color){
    $('body').css('color', color);
  },
  backgroundColor:function (color){
    $('body').css('backgroundColor', color);
  },
  inputColor:function (color){
    $(self).css('backgroundColor', color);
  }
}

2) 通过使用箭头函数：

var Color = {
  textColor:function (color){
    $('body').css('color', color);
  },
  backgroundColor:function (color){
    $('body').css('backgroundColor', color);
  },
  inputColor: (color) => {
    $(this).css('backgroundColor', color);
  }
}

PS：您最好将变量命名为 _this 或与 self 不同的名称，因为您可能会遇到麻烦 window.self.

如何在 jQuery 对象中使用 'self'？

How to use 'self' in jQuery object?

jquery

self