查找和替換的jQuery

Question

我有這樣的代碼給我上提交按鈕翻車，我試圖使它更通用：

$('.rollover').hover(
      function(){ // Change the input image's source when we "roll on" 
       srcPath = $(this).attr("src"); 
          srcPathOver = ??????? 
       /*need to manipulate srcPath to change from 
       img/content/go-button.gif 
       into 
       img/content/go-button-over.gif 
       */ 
       $(this).attr({ src : srcPathOver}); 
      }, 
      function(){ // Change the input image's source back to the default on "roll off" 
       $(this).attr({ src : srcPath}); 
      } 
    ); 

兩件事情真的，

我想學習如何操作srcPath變量以將文本'-over'附加到gif文件名上，以便爲翻轉提供新圖像。任何人都可以建議一種方法來做到這一點

另外，有人可以告訴我，如果這個代碼可以完善嗎？我對jQuery有點新，並且想知道是否可以改進語法。

非常感謝。

Answer 1

$('.rollover').hover(
      function(){ // Change the input image's source when we "roll on" 
       var t = $(this); 
       t.attr('src',t.attr('src').replace(/([^.]*)\.(.*)/, "$1-over.$2")); 
      }, 
      function(){ 
       var t= $(this); 
       t.attr('src',t.attr('src').replace('-over','')); 
      } 
    ); 

Answer 2

您應該可以使用正則表達式替換來修改您的源路徑。就像這樣：

srcPathOver = srcPath.replace(/([^.]*)\.(.*)/, "$1-over.$2"); 

更多關於JavaScript的正則表達式here

至於你怎麼做，我會確保你定義srcPath變量這樣

var srcPath; 
$('.rollover').hover(... 

的上面的代碼使得它看起來像srcPath是一個全局變量，這不是你想要的。

Answer 3

要操作的文件名並追加「-over」你只需要做一些JavaScript字符串操作，像這樣：

function appendOver(srcPath){ 
    var index = s.indexOf('.'); 

    var before = s.substr(0, index); 
    var after = s.substr(index); 

    return before + "-over" + after; 
} 

這將返回原來的文件名（在所有可能的格式），並添加'-over'字符串就在擴展點之前。