Javascript 使用JS/jQuery修改路径的最有效方法

我有很多社交按钮（

，悬停在
google_b.png
或
twitter_b.png
），我会一直以这种方式为所有文件命名

我的问题是如何在不必预先定义文件名的情况下，轻松地在
\u b
（维护文件扩展名）之间更改文件名

目前，我的代码如下所示：

$('#social li').hover(function() {
    // hover in
    // a bunch of code to animate a tooltip is here

    var $img = $t.children('img'),
        src = $img.attr('src');
    // change the source to img_b.png
    $img.attr('src', src);
}, 
function() {
    // hover out

    var $img = $(this).children('img'),
        src = $img.attr('src');
    // remove _b to make it img.png again
    $img.attr('src', src);
});

假设文件没有伪扩展名（
image.png.jpeg
），只需在
上拆分src，将
\u b
添加到倒数第二部分，然后在
上再次合并即可

src = $img.attr('src');
var temp = src.split(".");
temp[temp.length - 2] += "_b"; //change second to last element of array
src = temp.join(".");

您可以使用jquery attr（）函数直接从每个图像中提取src属性，向其添加字符，如“\u b”，然后将其悬停。
您可以使用jquery中的数据函数来存储信息，这样您就不必不断地重新计算它

$('#social li img').each(function(){
    var image = this.src.split(".");
    var onImage = image[0] + "_b." + image[1];

    $(this).data("onImage",onImage);
    $(this).data("offImage",this.src);

}).hover(function(){
    this.src = $(this).data("onImage");
},function(){
    this.src = $(this).data("offImage");
});

最有效的方法可能是对图像使用类，并在悬停时交换类。但您说您不想预定义图像名称，所以我不会将此作为答案发布。您不能用正则表达式或其他东西来更改字符串吗？效率（从性能方面而言）这不是一个真正需要考虑的问题，因为您只是在操作事件循环中的一个元素。很难找到一种方法来进行操作，换句话说，这种方法非常糟糕，甚至会导致真正的问题。@Pointy是的，我可以，但我在正则表达式方面很糟糕：/我说“保留文件扩展名”在这个问题中，我的意思不是“让我们疯狂地删除文件扩展名”。我的意思是简单地解析src属性，提取文件名，添加字符，然后将其设置为悬停，这是一个由本页其他人提供的更详细的解决方案：）很好，但是为什么不使用
temp[0]+=“\u b”
？因为无法保证
src
会精确地分成两部分。它可能包含完整的域名，其中将包含多个
s
$('#social li img').each(function(){
    var image = this.src.split(".");
    var onImage = image[0] + "_b." + image[1];

    $(this).data("onImage",onImage);
    $(this).data("offImage",this.src);

}).hover(function(){
    this.src = $(this).data("onImage");
},function(){
    this.src = $(this).data("offImage");
});