相對圖片源路徑使用jQuery返回null

Question

我遇到了問題，我需要幫助。

我想創建一個使用jQuery的鼠標懸停動畫，以便當用戶將鼠標懸停在圖像上時，它會顯示圖像的突出顯示版本。我知道我可以用CSS做到這一點，但問題是內容需要管理。所以我想編寫一個匹配圖像文件名部分的函數，併爲文件名的其餘部分使用通配符。

這是HTML： 這是除非用戶將鼠標懸停在圖像上纔會顯示的圖像。

<img class="imgPath" src="<?php echo PATH_SITE. 'uploads/folder/bgr_img.jpg' ?>" alt="First Image" /> 

當在圖像的用戶懸停，我想的改變src：

<img class="imgPath" src="<?php echo PATH_SITE. 'uploads/folder/hvr_image.jpg' ?>" alt="First Image" /> 

鼠標移開時，我想在src恢復到以前的狀態「bgr_image.jpg」

這是我目前使用jQuery的：

$(function() { 
    $(".imgPath") 
     .mouseover(function() { 
      var src = $(this).attr("src").match("http://domain.com/path/to/img/hvr_image.jpg"); 
      $(this).attr("src", src); 
     }) 
     .mouseout(function() { 
      var src = $(this).attr("src").replace("http://domain.com/path/to/img/hvr_image.jpg", "http://domain.com/path/to/img/bgr_image.jpg"); 
      $(this).attr("src", src); 
     }); 
}); 

如果我將鼠標懸停在圖片，現在，它會將src更改爲「null」。我嘗試使用未包含域的路徑名，但它返回相同的值。

幫助將不勝感激。

Answer 1

爲什麼你匹配你的src或更換呢？只要改變它：

$(function() { 
    $(".imgPath").hover(
     function() { $(this).attr("src", "http://domain.com/path/to/img/hvr_image.jpg"); }, 
     function() { $(this).attr("src", "http://domain.com/path/to/img/bgr_image.jpg"); } 
    ); 
}); 

編輯：

匹配（）返回匹配的數組：通過[0]

$(function() { 
    $(".imgPath") 
     .mouseover(function() { 
      var src = $(this).attr("src").match("http://domain.com/path/to/img/hvr_image.jpg"); 
      $(this).attr("src", src[0]); 
     }) 
     .mouseout(function() { 
      var src = $(this).attr("src").replace("http://domain.com/path/to/img/hvr_image.jpg", "http://domain.com/path/to/img/bgr_image.jpg"); 
      $(this).attr("src", src); 
     }); 
}); 

EDIT2你的src：

<img class="imgPath" onmouseover="changeImgSrc(this, '<?php echo PATH_SITE. 'uploads/folder/hvr_image.jpg') ?>'" onmouseout="changeImgSrc(this, '<?php echo PATH_SITE. 'uploads/folder/bgr_image.jpg') ?>'" src="<?php echo PATH_SITE. 'uploads/folder/bgr_image.jpg' ?>" alt="FirstImage" /> 

<script> 
    function changeImgSrc(img, imgsrc) { 
     $(img).attr('src', imgsrc); 
    } 
</script> 

OR：

<img class="imgPath" onmouseover="this.src = '<?php echo PATH_SITE. 'uploads/folder/hvr_image.jpg') ?>'" onmouseout="this.src = '<?php echo PATH_SITE. 'uploads/folder/bgr_image.jpg') ?>'" src="<?php echo PATH_SITE. 'uploads/folder/bgr_image.jpg' ?>" alt="FirstImage" /> 

Answer 2

的「匹配」函數返回一個布爾值，而不是字符串（在鼠標懸停功能）

Answer 3

沒有必要使用匹配（）和替換（）函數這個任務

做如下。

$(function() { 
    $(".imgPath") 
     .mouseover(function() { 

      $(this).attr("src", "http://domain.com/path/to/img/bgr_image.jpg"); 

     }) 
     .mouseout(function() { 
      $(this).attr("src", "http://domain.com/path/to/img/hvr_image.jpg"); 

     }); 
}); 

編輯：

讓說，如果你有這種情況的多個圖像：

<div class="imgPath"><img src="1.jpg" /> </div> 
<div class="imgPath"><img src="2.jpg" /></div> 
<div class="imgPath"><img src="3.jpg" /> </div> 
<div class="imgPath"><img src="4.jpg" /></div> 

因此，我們可以用下面的代碼管理此：

$('.imgPath img').hover(
    function(){ 
     $('.imgPath img').each(
      function(){ 
       $(this).attr("src", "http://domain.com/path/to/img/bgr_image.jpg"); 
      }); 
    }, 
    function(){ 
     $('.imgPath img').each(
      function(){ 
       $(this).attr("src", "http://domain.com/path/to/img/hvr_image.jpg"); 
      }); 
    } 

); 

我認爲這會幫助你礦石。

謝謝。