Question

我创建了jQuery函数

function starsMouseMove(n) {
    var i = $(this).offset().left,
        t = Math.floor((n.pageX - i)),
        w;
    if (t > 0 && t < 20) {
        w = 20;
    } else if (t >= 20 && t < 40) {
        w = 40;
    } else if (t >= 40 && t < 60) {
        w = 60;
    } else if (t >= 60 && t < 80) {
        w = 80;
    } else if (t >= 80 && t <= 100) {
        w = 100;
    }
    $(".stars_width", $(this)).css("width", w + "%");
    $(this).parent().find('#rating-input').val(w / 10);
};

然后我尝试在hover

上使用它

$('.stars').hover(function (n) {
    starsMouseMove(n);
});

但是我收到了错误

未捕获的TypeError：无法读取未定义的属性“left”

怎么了？如何解决？

Answer 1

问题是因为this函数中的starsMouseMove未引用hover事件选择器的元素，而是引用window。因此，offset()将返回为undefined，因此调用该属性会导致错误left。如果您想在该函数中维护this的范围，可以这样调用它：

$('.stars').hover(starsMouseMove);

或者，如果您更喜欢保留匿名函数（例如，除了调用starsMouseMove之外还包含逻辑），您可以使用$.proxy：

$('.stars').hover(function(e) {
    $.proxy(starsMouseMove, this, e);
});

或者您可以修改函数以接受jQuery对象作为参数，并将其传递给：

$('.stars').hover(function(e) {
    starsMouseMove(e, this);
});

function starsMouseMove(n, el) {
    var $el = $(el);

    // rest of your code...
}

如何在悬停时使用jQuery函数

1 个答案: