javascript - 使用 jQuery 创建按钮翻转

Question

我正在尝试创建一个可以在全局范围内使用的函数来创建图像的翻转状态。基本上，我希望能够向图像添加一个类，然后当您翻转它时，jquery 将使用相同的图像名称和相同的扩展名，但在文件名中添加“-over”。 (我将有一个翻转状态的图像，其名称与非翻转状态相同，除了上面有 -over 。我想出了这个，但它不起作用。我是做错了什么还是有人知道更好的方法吗？

$('.btn').hover(function(){
    $(this).attr("src").split(".jpg").join("Over.jpg"));
});

图像:

<img src="/static/images/overlay-close-button.jpg" alt="Close" title="Close" id="our-staff-overlay-close" class="btn"/>

谢谢!

编辑:有什么方法可以让它不特定于文件时间，它可以找出任何文件类型而不仅仅是 jpg？

我正在使用:

$('.btn').hover(function(){
    this.src = this.src.split(".jpg").join("Over.jpg");
}, function() {
    this.src = this.src.split("Over.jpg").join(".jpg");
 });

而且效果很好

编辑 2:我还可以添加事件状态(单击按钮时)吗？

Answer 1

分割和合并应该按预期工作，您只需将其设置回 img 的 src 属性即可:

$('.btn').hover(function() {
    var src = $(this).attr("src");
    src = src.split('.jpg').join('-over.jpg');
    $(this).attr("src", src);
});

此外，如果您希望它与任何扩展一起使用，您可以使用如下正则表达式:

$('.btn').hover(function() {
    var src = $(this).attr("src");
    src = src.replace(/(.*)\.(png|gif|jpg|jpeg)$/, "$1-over.$2");
    $(this).attr("src", src);
});

正则表达式匹配以句点结尾后跟 png、gif、jpg 或 jpeg 之一的任何内容，并将其替换为第一部分(路径 + 文件名)，即字符串“-over”、句点和原始扩展名。

您可以通过从源中删除 -over 将其替换回原始状态:

$('.btn').hover(function() {
    var src = $(this).attr("src");
    src = src.replace(/(.*)\.(png|gif|jpg|jpeg)$/, "$1-over.$2");
    $(this).attr("src", src);
}, function() {
    var src = $(this).attr("src");
    src = src.replace(/(.*)-over\.(png|gif|jpg|jpeg)$/, "$1.$2");
    $(this).attr("src", src);
});

jQuery().hover 事件接受两个函数，第一个函数在您开始悬停时调用，第二个在您退出悬停时调用。