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

我的網站右側有一個社交按鈕負載（<img> s，位於<ul>）。使用JS/jQuery修改路徑的最有效方法

它們可能有文件名，如google.png或twitter.png。

我現在想要將src更改爲google_b.png或twitter_b.png - 我會一直以這種方式爲所有這些文件命名我的文件。

我的問題是如何輕鬆地改變文件名和_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); 
});

來源

2012-01-10 Alex Coplan

最有效的方法可能是使用類的圖像，只是在您懸停時交換類。但是你說你不想預先定義圖像名稱，所以我不會發布這個答案。 – 2012-01-10 15:57:37

你不能只用正則表達式或其他東西來改變字符串嗎？效率（就性能而言）在這裏並不真正考慮，因爲您只是在事件循環中操縱一個元素。換句話說，很難找到一種辦法來解決這個問題，以至於造成真正的問題。 – Pointy 2012-01-10 16:02:59

@Pointy是的我可以，但我在正則表達式很糟糕：/ – 2012-01-10 16:09:02

$('#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').replace(".png", "_b.png"); 
    // change the source to img_b.png 
    $img.attr('src', src); 
}, 
function() { 
    // hover out 

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

來源

2012-01-10 16:06:10

這是一個很好的解決方案。 – 2012-01-10 16:09:58

假設文件不會有假的擴展名（image.png.jpeg）剛剛劈在.的SRC，加_b到倒數第二個部分和.再次加入。

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

來源

2012-01-10 16:03:40 bububaba

很好，但爲什麼不使用'temp [0] + =「_b」'？ – 2012-01-10 16:13:21

由於不能保證'src'會分成兩部分。它可能包含完整的域名，它將包含多個'.'s – bububaba 2012-01-10 19:33:30

-1

你可以從使用jQuery ATTR（）函數中的每個圖像直接提取的src屬性，附加字符以它像「_b」它是否和懸停。

來源

2012-01-10 16:06:33 vishakvkt

我說「保留文件擴展名」在問題 – 2012-01-10 16:09:35

我不是說，'讓我們瘋了，刪除文件擴展名'。我的意思是簡單地解析src屬性，提取文件名，附加字符，並將其設置爲懸停狀態，本頁面上的其他人可以更詳細地給出解決方案:) – vishakvkt 2012-01-10 16:13:50

您可以使用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"); 
});

來源

2012-01-10 16:11:05

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

回答

相關問題