使用 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 事件接受两个函数，第一个函数在您启动悬停时调用，第二个函数在您开始悬停时调用。当您退出悬停时调用。

Answer 2

你只是没有对结果做任何事情。在这种情况下，您想要设置src（可以通过几种方式完成），这是最有效的示例（无需更改您的.split()）。 join() 方法）：

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

Answer 3

$('.btn').hover(function(){
    $(this).attr("src", this.src.split(".jpg")[0] + "-over.jpg");
}, function() {
   $(this).attr("src", this.src.split("-over.jpg")[0] + ".jpg");
})

Answer 4

您可能需要考虑使用纯 CSS 来实现翻转效果。确实没有必要在像图像翻转这样琐碎的事情中涉及脚本。另外，对于那些在关闭脚本的情况下浏览的偏执狂来说，纯 CSS 方法仍然有效。

使用 :hover 和 :active 伪类并利用 CSS 精灵。

这里的缺点是这种方法很难普遍适用，因为您需要事先知道图像的大小。