javascript - 单击项目时更改 onmouseover="this.src='xxx'"

Question

我有这张图片，它在悬停时会改变 src：

<img id="apripreventivo" src="img.svg" onmouseover="this.src='img_hover.svg'" onmouseout="this.src='img.svg'">

然后我有一个脚本，当单击该图像时会切换一个 div（#contact-form）：

$(document).ready(function(){

        $("#contact-form").hide();
        $("#apripreventivo").show();

    $('#apripreventivo').click(function(){
    $("#contact-form").slideToggle();
    });

});

我怎样才能重写上面的函数，以便在单击图像（#apripreventivo）时，它的onmouseoversrc 更改为例如 *img_hover2.svg* （“正常” src 并且onmouseout是相同的。仍然是#contact-form “div 切换单击时）。然后再次单击onmouseover时应返回原始状态（*img_hover.svg*）。

Answer 1

我已经得到了你大部分的方式：JSFiddle。

诀窍就是使用 jQuery 的 $.attr() 方法更改 img 标签的属性。

$('img').click(function() {
    $(this).attr("onmouseover", "this.src='http://newevolutiondesigns.com/images/freebies/cat-wallpaper-7.jpg'");
})

您可以轻松编写一个函数来检查此属性的当前值，然后在单击时设置正确的值。希望这可以帮助！