使用 jQuery 交换按钮图像

Question

我正在尝试学习jQuery的各个方面。我有一个带有 id='contact' 的按钮，我想在鼠标悬停事件上更改其图像。

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

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

未

捕获的类型错误：无法读取未定义的
属性"替换" （匿名功能）
x.each.x.event.special.（匿名 function）.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";

我做错了什么？谢谢！

附言我知道还有其他方法可以解决这个问题（比如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');