jquery - img attr src 不会改变

Question

这是我能够在悬停 src 时显示的情况，但屏幕上的图像本身并没有改变。任何帮助都会有很大帮助。

$('.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 {}
}
});

Answer 1

调用函数时上下文会丢失，formSelector并且this会在函数内显示窗口对象。您应该将this对象作为参数传递或使用.call/.apply.

尝试如下，

$(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

首先，最后你有一个额外});的。

你真正的问题：this不是你想的那样。在这种情况下，this指的是窗口对象，而不是图像。解决此问题的一种方法是将图像元素传递给函数。

$('.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");
  }
}

演示