Javascript 使用jQuery时，相对图像源路径返回null

我有个问题需要帮助

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

以下是HTML： 除非用户将鼠标悬停在图像上，否则将始终显示该图像

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

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

---

非常感谢您的帮助。

match”函数返回的是布尔值，而不是字符串（在mouseover函数中）

为什么要匹配或替换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"); }
    ); 
}); 

编辑：

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

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>

---

”“onmouseout=“changeImgSrc（此，”此任务不需要使用match（）和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");

        });
});

编辑：

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

假设您对多个图像有这样的场景：

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

我想这会对你有更多帮助

谢谢。
因为我想使用通配符，这样我就可以应用于网站该部分中的所有图像。此方法只能应用于1个实例，我如何才能将其应用于5个具有5个不同名称的图像。将该函数重复编写5次？似乎有些草率。它仍然返回null。如果我在匹配中使用相同的图像，则nction，该选项已加载。它不会显示任何错误，因为存在匹配项且src不为null。但是，如果尝试将其与悬停状态的图像匹配，它将告诉我src为null。我在帖子（EDIT2）中添加了一个新的解决方案。这可能会对您有所帮助。它会使html变得混乱，但必须这样做，谢谢您的时间Andreas。它工作得很好。：）不，“match”以数组形式返回匹配项，如果不匹配，则返回null。是的，这工作得很好，就像前面的答案一样。但是，我想将此应用于多个图像。使用此方法，我只能将其应用于1张图像。请检查我编辑的答案部分。谢谢
<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");
            });
    }

);