jquery在翻转时更改图像src

Question

我有两个图像和它们的翻转图像。使用 jQuery，我想在 onmousemove/onmouseout 事件发生时显示/隐藏翻转图像。我所有的图像名称都遵循相同的模式，如下所示：

Original Image: /CompleteEducation/images/icons/toggleIcon.png

Rollover Image: /CompleteEducation/images/icons/toggleIconDisabled.png

我使用了以下代码，但此代码覆盖了名称：

$(function() {
    $("img")
        .mouseover(function() { 
            var src = $(this).attr("src").match(/[^\.]+/) + "toggleIconDisabled.png";
            $(this).attr("src", src);
        })
});

我如何使用 jQuery 来做到这一点？

Answer 1

我认为问题就在这里

 var src = $(this).attr("src").match(/[^\.]+/) + "toggleIconDisabled.png"; //this will return "/CompleteEducation/images/icons/toggleIcontoggleIconDisabled.png"

试试这个

var src = ($(this).attr("src").indexOf("Disabled")>-1)?"/CompleteEducation/images/icons/toggleIcon.png":"/CompleteEducation/images/icons/toggleIconDisabled.png";

Answer 2

您可以使用条件运算符更改图像

$(function() {
    $("img")
        .mouseover(function() { 
            this.src = this.src.indexOf('Disabled.png') == -1 ?
               '/CompleteEducation/images/icons/toggleIconDisabled.png' :
               '/CompleteEducation/images/icons/toggleIcon.png';
        })
});

Answer 3

你说在每次鼠标悬停时，检查当前图像的属性 SRC 是否包含你喜欢的文件名。如果是，那么您更改来源。如果错误，您可以替换我的示例字符串。

我的 HTML：

<img src='http://velocityagency.com/wp-content/uploads/2013/08/go.jpg' width='500' >

我的 JS：

// 确保您已将代码放入 Document.ready
$(document).ready(function(){

    $("img").on("mouseenter", function(){


    if($(this).attr("src").indexOf("go.jpg") !== -1) // we check if the path contains the name of the image at all
    {
       var att = $(this).attr("src"); // we then pull the src attr
       att = att.replace("go.jpg", "iPAd.jpg"); //and search for the filename and replace new file name

       // in the end we assign the new imagepath to the src of the hovered image
       $(this).attr("src", att);
    }
});
});

检查这个小提琴或上面的代码：

http://jsfiddle.net/F72h3/