使用 jQuery 的相对图像源路径返回 null

Question

我有一个问题需要帮助。

我正在尝试使用 jQuery 创建鼠标悬停动画，以便当用户将鼠标悬停在图像上时，它会显示图像的突出显示版本。我知道我可以用 CSS 做到这一点，但问题是需要管理内容。所以我想写一个函数来匹配图像文件名的一部分，并为文件名的其余部分使用通配符。

这里是 HTML： 这是始终显示的图像，除非用户将鼠标悬停在图像上。

<img class="imgPath" src="<?php echo PATH_SITE. 'uploads/folder/bgr_img.jpg' ?>" alt="First Image" />

当用户将鼠标悬停在图像上时，我想更改 src：

<img class="imgPath" src="<?php echo PATH_SITE. 'uploads/folder/hvr_image.jpg' ?>" alt="First Image" />

鼠标悬停时，我希望 src 恢复到之前的状态“bgr_image.jpg”

这是我目前使用的 jQuery：

$(function() {
    $(".imgPath")
        .mouseover(function() { 
            var src = $(this).attr("src").match("http://domain.com/path/to/img/hvr_image.jpg");
            $(this).attr("src", src);
        })
        .mouseout(function() {
            var src = $(this).attr("src").replace("http://domain.com/path/to/img/hvr_image.jpg", "http://domain.com/path/to/img/bgr_image.jpg");
            $(this).attr("src", src);
        });
});

如果我现在将鼠标悬停在图像上，它会将 src 更改为“null”。我尝试使用不包含域的路径名，但它返回相同的值。

我们将不胜感激。

Answer 1

“匹配”函数返回布尔值，而不是字符串（在鼠标悬停函数中）

Answer 2

为什么要匹配你的 src 或替换它？只需更改它：

$(function() { 
    $(".imgPath").hover(
        function() { $(this).attr("src", "http://domain.com/path/to/img/hvr_image.jpg"); },
        function() { $(this).attr("src", "http://domain.com/path/to/img/bgr_image.jpg"); }
    ); 
}); 

编辑：

match() 返回匹配的数组：使用 [0] 访问您的 src

$(function() { 
    $(".imgPath") 
        .mouseover(function() {  
            var src = $(this).attr("src").match("http://domain.com/path/to/img/hvr_image.jpg"); 
            $(this).attr("src", src[0]); 
        }) 
        .mouseout(function() { 
            var src = $(this).attr("src").replace("http://domain.com/path/to/img/hvr_image.jpg", "http://domain.com/path/to/img/bgr_image.jpg"); 
            $(this).attr("src", src); 
        }); 
});

EDIT2：

<img class="imgPath" onmouseover="changeImgSrc(this, '<?php echo PATH_SITE. 'uploads/folder/hvr_image.jpg' ) ?>'" onmouseout="changeImgSrc(this, '<?php echo PATH_SITE. 'uploads/folder/bgr_image.jpg' ) ?>'" src="<?php echo PATH_SITE. 'uploads/folder/bgr_image.jpg' ?>" alt="FirstImage" />

<script>
    function changeImgSrc(img, imgsrc) {
        $(img).attr('src', imgsrc);
    }
</script>

或者：

<img class="imgPath" onmouseover="this.src = '<?php echo PATH_SITE. 'uploads/folder/hvr_image.jpg' ) ?>'" onmouseout="this.src = '<?php echo PATH_SITE. 'uploads/folder/bgr_image.jpg' ) ?>'" src="<?php echo PATH_SITE. 'uploads/folder/bgr_image.jpg' ?>" alt="FirstImage" />

Answer 3

此任务无需使用 ma​​tch() 和 replace() 函数

请按以下步骤操作。

$(function() {
    $(".imgPath")
        .mouseover(function() { 

            $(this).attr("src", "http://domain.com/path/to/img/bgr_image.jpg");

        })
        .mouseout(function() {
            $(this).attr("src", "http://domain.com/path/to/img/hvr_image.jpg");

        });
});

已编辑：

假设您是否对多张图片有这种情况：

<div class="imgPath"><img src="1.jpg" /> </div>
<div class="imgPath"><img src="2.jpg"  /></div>
<div class="imgPath"><img src="3.jpg" /> </div>
<div class="imgPath"><img src="4.jpg"  /></div>

所以我们可以用下面的代码来管理这个：

$('.imgPath img').hover(
    function(){
        $('.imgPath img').each(
            function(){
                $(this).attr("src", "http://domain.com/path/to/img/bgr_image.jpg");
            });
    },
    function(){
        $('.imgPath img').each(
            function(){
              $(this).attr("src", "http://domain.com/path/to/img/hvr_image.jpg");
            });
    }

);

我认为这会对你有更多帮助。

谢谢。