How to use jQuery function on hover

Question

I created jQuery function

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

and then I try to use it on hover

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

but I get an error

Uncaught TypeError: Cannot read property 'left' of undefined

What's wrong? How to fix it?

you should have logged this, you would have discovered it was Window — Smern
– Smern, Commented Apr 10, 2015 at 14:52

Rory McCrossan · Accepted Answer · 2015-04-10 14:51:04Z

2

The issue is because this within your starsMouseMove function does not refer to the element of the hover event selector, but instead the window. Therefore the offset() is returned as undefined, so calling the left property of that throws the error. If you want to maintain the scope of this within that function you can call it like this:

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

Alternatively if you'd prefer to keep the anonymous function (if it contains logic besides the call to starsMouseMove for example) you could use $.proxy:

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

Or you could amend the function to accept a jQuery object as a parameter, and pass it in:

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

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

    // rest of your code...
}

answered Apr 10, 2015 at 14:51

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

truslivii.lev Over a year ago

Thanks a lot for help, I used the last solution, it works fine for me.

Collectives™ on Stack Overflow

How to use jQuery function on hover

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related