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的{{1}}的任何其他函数）：

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

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对象中使用“自我”？

2 个答案: