幫助多個圖像jQuery的懸停

Question

嘿傢伙，對不起，我是新來jquery。我一直試圖用CSS做所有事情，但我試圖爲一個網站顯着削減我的代碼。 我正在嘗試做的事情是，當一個div.class img被徘徊時，它會同時更改2個圖像的源文件。 我可以得到這個發生，但我需要這兩個圖像有不同的源文件。 我也試圖讓代碼簡單到足以讓我可以在HTML中設置圖像源，而不必在腳本中設置每個圖像。原因是實際的應用程序將有幾百個圖像。在CSS和腳本中定義翻轉狀態太笨重。

這是我到目前爲止。

<script> 
    $(function() { 
     $(".on img").hover(
      function() { 
    $(".on img").attr("src", $(".on img").attr("src").split(".").join("_hover.")); 
}, 
function() { 
    $(".on img").attr("src", $(".on img").attr("src").split("_hover.").join(".")); 
     }); 
    }); 

    </script> 

所以我用一個DIV類指定任何我想改變的圖像，或將徘徊。 因此，當該類中的任何其他圖像被徘徊時，任何圖像都將具有翻轉狀態。

現在的問題是，當該類中的所有圖像都發生變化時，它們都將更改爲相同圖像源，我需要它們更改爲自己的圖像源。所以x.jpg變成x_hover.jpg，y.jpg變成y_hover.jpg等。

這裏是這個例子的HTML。

<div class="on"><img src="api.jpg" /> </div> 
    <div class="on"><img src="ex.jpg" /></div> 
    <div class="on"><img src="api.jpg" /> </div> 
    <div class="on"><img src="ex.jpg" /></div> 

謝謝!!任何人都可以提供幫助，我們將不勝感激。我是Jquery的新手，我一直在尋找如何做到這一點的日子。

-JK

Answer 1

我能想出這個，改變徘徊，在元素的src最簡單的方法是：

$('.on img').hover(
    function(){ 
     var cur = this.src.split('.'); 
     var extension = cur.pop(); 
     this.src = cur.join('.') + '_hover.' + extension; 
    }, 
    function(){ 
     this.src = this.src.replace('_hover',''); 
    } 
); 

JS Fiddle demo。

---

編輯響應質疑，在評論這個答案，從@Jamie：

你知不知道我怎樣才能使這個適用於在該div類中的所有圖像，但讓每個圖像都變成它自己的圖像？例如：a.jpg改爲a_hover.jpg，然後改回a.jpg，而b.jpg改爲b_hover.jpg，然後恢復爲b.jpg。如果光標將圖像懸停在該div類中，我希望同時更改所有這些圖像。

下面的jQuery腳本會照顧的，對你：

$('.on img').hover(
    function(){ 
     $('.on img').each(
      function(){ 
       var cur = this.src.split('.'); 
       var extension = cur.pop(); 
       this.src = cur.join('.') + '_hover.' + extension; 
      }); 
    }, 
    function(){ 
     $('.on img').each(
      function(){ 
       this.src = this.src.replace('_hover',''); 
      }); 
    } 

); 

JS Fiddle demo。

編輯修復上面的URL，由於某種原因，它是一個圖像，而不是演示。傻我......它現在鏈接到實際的演示。抱歉。

Answer 2

試試這個：

$(function() { 
    $(".on img").hover(
      function() { 
        $(this).attr("src", $(this).attr("src").split(".").join("_hover.")); 
      } , 
      function() { 
        $(this).attr("src", $(this).attr("src").split("_hover.").join(".")); 
      }); 
    }); 

在此背景下$(this)會給你懸停圖像，而不是與該類別的所有圖像。

Answer 3

只是我採取與正則表達式

$('.on img').hover(function() { 
    this.src = this.src.replace(/(.*)(\.[^.]+)$/, '$1_hover$2'); 
}, function() { 
    this.src = this.src.replace(/_hover(\.[^.]+)$/, '$1'); 
}); 

小提琴：http://jsfiddle.net/nWc2D/