Javascript替換下劃線後的文本

Question

我想在文件名下劃線後替換一些文本。

示例文件名：FileName_true.png。我需要將其更改爲FileName_false.png。

基本上，我有一個圖像，當你點擊它時，我想改變它。 （顏色到黑色和白色，反之亦然）。我想過在JQuery中使用切換，但我不確定是否可以像5個圖像一樣執行操作，而無需重複代碼5次。

我的想法是創建一個函數，該函數使用正則表達式來捕獲單擊的圖像的文件名中的'true'或'false'，並將其替換爲備用。

您對完成此操作有何看法？如果可能，我希望在PHP中完成，但如果沒有，那麼JavaScript/JQuery。謝謝你的幫助！如果您有任何問題，請告訴我。

Answer 1

filename = filename.replace('_true','_false'); 

既不jQuery的，也沒有必要

<img src="FileName_true.png" 
onclick="this.src=(this.src.indexOf('_true')!=-1)?this.src.replace('true','false'):this.src.replace('false','true')" /> 

正則表達式是我能想出這麼晚了

要做到這一點在PHP是太傻了，並需要一個cookie

Answer 2

mplungjan的答案很好，但讓我建議一些替代方案。圖像交換最好用sprite完成，這樣圖像之間就不會有任何延遲切換。將兩個版本的圖像並排放在一個文件中。將該圖像設置爲div的背景，並調整背景位置以顯示一個或另一個圖像。

假設「pic1_bw_color_sprite.png」是一個75x75的彩色圖像，其下方有一個75x75的黑白圖像，使得最終圖像寬75px，高150px。設置你的CSS是這樣的：

#pic1 
{ 
    background-image: url(pic1_bw_color_sprite.png); 
    height: 75px; 
    width: 75px; 
} 
#pic1.bw 
{ 
    background-position: 0px -75px; 
} 

然後一些簡單的jQuery，使這一切工作：

$("#pic1").click(function() 
{ 
    $(this).toggleClass("bw"); 
}); 

嘗試在這裏：http://jsfiddle.net/gilly3/B7esz/

至於複製代碼，這是一個jQuery非常擅長避免的事情。只需使用一個選擇，其中包括每個需要的行爲類：

$("#pic1,#pic2,#pic3,#pic4").click(...); 
// or 
$(".bwSwap").click(...); 

要存儲當前狀態的形式，這樣就可以更新你的數據庫，你需要得到一個參考到你的表單元素，然後設置value屬性（或jQuery中的.val()）。

$("#pic1").click(function() 
{ 
    $(this).toggleClass("bw"); 
    $("#pic1isBW").val($(this).hasClass("bw")); 
});