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

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

我的Html：

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

我的JS：

//确保已将代码放入Document.ready中 $（文件）。就绪（函数（）{

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

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

我认为问题在这里

 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";

jquery在翻转时更改图像src

3 个答案: