Question

基本上我正在尝试将一些JQuery添加的div = class =“cell”的div的背景颜色更改为class =“grid”的父div。因此，“cell”类未在原始index.html中定义

所以当我编写这样的代码时它会起作用：

$(document).ready(function() {
    var clr = "red";
    $('.cell').mouseenter(function() { 
        $(this).css('background-color', clr);
    });
});

但是当我定义一个像：

这样的函数时却没有

$(document).ready(function() {
    function fillCell(clr){
        $(this).css('background-color', clr);
    }

    $('.cell').mouseenter(function() { 
        alert(clr);     //added for test 
        fillCell("red");
    });

});

请注意，悬停时会触发alert（），并以“red”响应。

Answer 1

this仅适用于作为参数（匿名或您定义的函数）传入的任何函数的上下文。您可以做的只是将this作为参数传递给您案例中的函数，因为您需要它来执行其他操作，并且它将以您希望的方式工作。

$(document).ready(function() {
    function fillCell(clr, o){
        $(o).css('background-color', clr);
    }

    $('.cell').mouseenter(function() { 
        alert(clr);     //added for test 
        fillCell("red", this);
    });
});

Answer 2

这样做。

fillCell.call(this, "red");

mouseEnter事件处理程序将其上下文（this）设置为触发事件的元素。但是，通过将函数定义提取到事件处理程序的外部，您将失去this上下文。 .call()允许您覆盖该上下文。阅读更多here。

为什么$（this）选择器在我的函数中起作用但在外部工作？

2 个答案: