0

我需要一个可以正常工作的正则表达式，我目前的正则表达式正在破坏。

目标是

图像的正常 src 是：Image.png

在悬停时使用 jQuery 我动态查找图像的 src 并将其替换为 ImageName-Dn.png

悬停时将其设置回 ImageName.png

我目前的解决方案：

$(document).ready(function(){
   $(".myButton").hover(
        function () {
            var s = $(this).attr('src');
            s = s.substring( 0, s.search(/(\.[a-z]+)$/) ) + '-Dn' + s.match(/(\.[a-z]+)$/)[0]; 
            $(this).attr('src', s);
        },
        function () {
            var o = $(this).attr('src');
            o = o.replace(/-Dn\./, '.'); 
            $(this).attr('src', o);
        }

    );
});

然而，由于某种原因，图像在某些时候被设置为ImageName-Dn.png然后搞砸并被设置为ImageName-Dn-Dn.png依此类推。有什么帮助吗？

4

3 回答 3

1

一个快速的解决方法是测试字符串中是否还没有 -Dn：

if (!string.match(/-Dn\./))

此外，使用正则表达式，您无需手动拆分字符串并进行多次搜索。您可以使用分组在单个替换指令中接收您需要的内容，例如：

string.replace(/(.*)\.(.*)/, "$1-Dn.$2")

如果您想阅读 Javascript 的正则表达式：http ://en.wikibooks.org/wiki/JavaScript/Regular_Expressions

于 2009-08-05T03:20:23.030 回答
0

你这样做是为了鼠标悬停效果吗？为什么不使用图像精灵？实际上，您只需要创建 1 个并排包含图像的两个版本的图像，并将其设置为将显示它的元素的背景。

例如，10x10 图像及其鼠标悬停版本将变为 10x20 图像，原始图像位于鼠标悬停版本之上。

然后，您可以创建一个 10x10 的 div，并将 background-image 设置为 10x20 图像。由于只会显示前 10x10，因此您只能看到原始版本。

然后在javascript中，您可以简单地将调用附加到事件

 $(el).style.backgroundPosition = '0px -10px';

在悬停事件和

$(el).style.backgroundPosition = '0px 0px';

重置它

这将在鼠标悬停时将背景向上移动。这不仅比为简单的图像交换处理正则表达式更干净，而且还减少了页面必须加载的文件数量。

希望这可以帮助！

于 2009-08-05T03:15:56.457 回答
0 
   function () {
        var s = $(this).attr('src');
        if( !s.match(/-Dn\.[a-z]+$/) ) {
          s = s.substring( 0, s.search(/(\.[a-z]+)$/) ) + '-Dn' + s.match(/(\.[a-z]+)$/)[0]; 
          $(this).attr('src', s);
        }
    },
    function () {
        var o = $(this).attr('src');
        o = o.replace(/-Dn\./, '.'); 
        $(this).attr('src', o);
    }

（附加条件）

于 2009-08-05T03:18:04.173 回答