Question

我试图学习jQuery的各个方面。我有一个id =＆＃39;联系人＆＃39;我想在鼠标悬停事件上更改其图像。

<button id='contact' class='CXIII' onclick="btnContact()">
    <img id="logo" src="images/contact_blue.png">
</button>

我使用以下代码，但当我将鼠标悬停在按钮上时，我收到此错误：

未捕获的TypeError：无法读取属性＆＃39;替换＆＃39;未定义的   （匿名函数）
x.each.x.event.special。（匿名   功能）.handle
x.event.dispatch
  x.event.add.y.handle

$("#contact").hover(
    function () {$(this).src = this.src.replace(contact_blue.src, contact_green.src);},
    function () {$(this).src = this.src.replace(contact_green.src, contact_blue.src);}
);

contact_blue和contact_green是全局变量，用于保存对图像的引用，并在我已经测试并且对其充满信心的预加载函数中实例化。

contact_green = new Image();
contact_blue  = new Image();

contact_green.src = "http://www.xxxxxx.com/update/images/contact_green.png";
contact_blue.src  = "http://www.xxxxxx.com/update/images/contact_blue.png";

我做错了什么？谢谢！

P.S。我知道还有其他方法可以解决这个问题（比如CSS），但我现在正专门尝试学习jQuery。另外，

编辑：我尝试了这两个，但没有成功：

$("#contact").hover(
    function () {this.src = this.src.replace(contact_blue.src, contact_green.src);},
    function () {this.src = this.src.replace(contact_green.src, contact_blue.src);}
);


$("#contact").hover(
    function () {$(this).prop('src') = this.src.replace(contact_blue.src, contact_green.src);},
    function () {$(this).prop('src') = this.src.replace(contact_green.src, contact_blue.src);}
);

Answer 1

就是这个

$(this).src

这是一个jQuery对象，它没有src属性，要么

this.src = new_source;

或

$(this).prop('src', new_source)

另外，您确定contact_blue和contact_green有src属性吗？

但是，错误消息似乎表明this.src未定义，并且没有replace方法，这很奇怪，您确定#contact是图像元素吗？

编辑：

现在您已经发布了HTML，图像位于按钮内部，因此它是

$("#contact").hover(
    function () {
        var image = $(this).find('img').get(0);
        image.src = contact_green.src;
    },
    function () {
        var image = $(this).find('img').get(0);
        image.src = contact_blue.src;
    }
);

请注意，replace替换为字符串，它不会交换您传入的变量？

Answer 2

试试这个：

   $(this).attr('src','New_Image_Path');

用jQuery交换按钮图像

2 个答案:

编辑：