在外部函数中使用$(this)

Question

我是JavaScript的新手,我想知道为什么它对我不起作用:

function resetColor(){
     $(this).css( { "color": "red" } )
}

$('.class').click(function() {
     resetColor();
});

我也尝试$(this)在点击时保存为变量.class,但这对我也不起作用.

Answer 1

一种更简单的方法是引用该函数而不是将其包装在匿名函数中,如下所示:

$('.class').click(resetColor);

Answer 2

最好的方法是将其作为参数传递

function resetColor(element) {
     $(element).css( { "color": "red" } )
}

$('.class').click(function() {
     resetColor(this);
});

另一种方法是将resetColor定义为对象内的函数

    jQuery.fn.resetColor = function() {
         $(this).css( { "color": "red" } )
    }
    $('.class').click(function() {
         $(this).resetColor();
    });

Answer 3

this代表谁调用函数的上下文.当你打电话时resetColor,它隐含地使用this作为window对象的顶级.如果您希望通过函数调用来维护上下文,则可以使用call().

$('.class').click(function() {
    resetColor.call(this);
});

另一个明显的选择是不使用this,而是将元素作为参数传递.

function resetColor(e) {
     $(e).css({color: 'red'});
}

$('.class').click(function() {
     resetColor(this);
});