Question

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

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

Demo

Img attr src不会改变

2 个答案: