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

在mouseout上我希望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

为什么你匹配你的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>

OR：

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

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

Answer 3

此任务无需使用匹配（）和替换（）功能

执行以下操作。

$(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");
            });
    }

);

我认为这会对你有所帮助。

感谢。

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

3 个答案: