jQuery - 動態替換鼠標事件的圖像源

Question

我有一個圖像作爲按鈕的示例導航列表。當用戶將鼠標懸停在按鈕上並單擊鼠標時，按鈕有兩種附加狀態。每個按鈕都有相同的命名約定，所以對於後退按鈕，會有「back.jpg」，「back_over.jpg」和「back_down.jpg」。由於頁面上會有多個按鈕，因此我的目標是獲取選定圖像源的路徑，然後通過追加/刪除適當的路徑部分來修改它。

我有一個工作的例子，但我覺得它可以更優雅。例如，我非常確定可以將3個圖像路徑中的每一個存儲爲變量並以某種方式傳遞它們。但是當我嘗試這種方法時，img src不會正確追加或刪除。我也知道這是可能的CSS，我已經做了。這主要是爲了增加我對jQuery的理解。

$(document).ready(function() { 

     $('li > img').bind('mouseenter mousedown mouseup mouseleave click', function(event) { 

      var overImgSrc = $(this).attr('src').match(/[^\.]+/) + '_over.jpg'; 
      var downImgSrc = $(this).attr('src').replace('_over.jpg', '_down.jpg'); 
      var upImgSrc = $(this).attr('src').replace('_down.jpg', '_over.jpg'); 
      var outImgSrc = $(this).attr('src').replace('_over.jpg', '.jpg'); 

      var evtType = event.type; 

      switch (evtType) { 
       case 'mouseenter': 
       $(this).attr('src', overImgSrc); 
       break; 

       case 'mousedown': 
       $(this).attr('src', downImgSrc); 
       break; 

       case 'mouseup': 
       $(this).attr('src', upImgSrc); 
       break; 

       case 'mouseleave': 
        if ($(this).attr('src', downImgSrc)) { 
         var downOutImgSrc = $(this).attr('src').replace('_down.jpg', '.jpg'); 
         $(this).attr('src', downOutImgSrc); 
        } 
        else { 
         $(this).attr('src', outImgSrc); 
        } 
       break; 

       case 'click': 
       alert("Yowza!"); 
       break; 

       default: 
       break; 
      } 
     }); 
    }); 

HTML

<ul id="nav"> 
     <li><img src="images/Back.jpg"></li> 
     <li><img src="images/Next.jpg"></li> 
</ul> 

Answer 1

嘗試了這一點：

$(document).ready(function() { 
    $('li > img').bind('mouseenter mousedown mouseup mouseleave click', function(event) { 
     var images = { 
      'mouseenter' : '_over.jpg', 
      'mousedown' : '_down.jpg', 
      'mouseup' : '_over.jpg', 
      'mouseleave' : '.jpg', 
     }; 

     //Store the original source without the extension. 
     if (this.originalSource == undefined) { 
      this.originalSource = this.src.substring(0, this.src.lastIndexOf('.')); 
     } 

     var evtType = event.type; 

     //Append the affector. 
     if (evtType in images) { 
      this.src = this.originalSource + images[evtType]; 
     } 

     //Handle your click event. (left the switch event in case you want to do something else with other events) 
     switch (evtType) { 
     case 'click': 
      alert("Yowza!"); 
      break; 
     default: 
     } 
    }); 
}); 

Answer 2

存儲圖像作爲一個數組，並且通過索引引用它們。

var $images = ['image1.jpg','image2.jpg']; 

case 'mouseenter': 
    $(this).attr('src', $images[0]); 
    break; 

粗糙的例子，但你明白了。

編輯：拿出了動態創作，因爲應用程序不是很可行。