Img attr src will not change

Question

Heres the situation i am able to show on hover the src as being chenged but the image on the screen itself doesnt actualy change. any help would be a great help.

$('.hoverImgs').hover(
function(){mouseOn = 1; formSelector('hover');},
function(){mouseOn = 0; formSelector('out');
});
function formSelector(method){
if(mouseOn === 1 && method === 'hover'){ 
 $(this).attr("src", "images/radio_hover.png");
 alert($(this).attr("src"));
}
else {}
}
});

• charlietfl: this doesn't have any jQuery context in your function.. it is the window

Answer 1

The context is lost when you call the function formSelector and this would window object inside the function. You should either pass this object as an argument or invoke the function using .call/.apply.

Try like below,

$(function () {
 var mouseOn;
 $('.hoverImgs').hover(
 function(){ mouseOn = 1; formSelector('hover', this); },
 function(){mouseOn = 0; formSelector('out', this); }
 );
 function formSelector(method, thisObj){
 if(mouseOn === 1 && method === 'hover'){ 
 thisObj.src = "images/radio_hover.png";
 alert(thisObj.src);
 }
 else {}
 }
});

Answer 2

First, you have an extra }); at the end.

Your real problem: this is not what you think it is. In that context, this refers to the window object, not the image. One way to fix that is pass in the image element into the functions.

$('.hoverImgs').hover(
 function(){mouseOn = 1; formSelector($(this), 'hover');},
 function(){mouseOn = 0; formSelector($(this), 'out');}
);
function formSelector(elem, method){
 if(mouseOn === 1 && method === 'hover'){
 console.log(elem.attr('src'));
 elem.attr("src", "https://www.google.com/images/srpr/logo3w.png");
 }
}

Demo