在jQuery的1.9我的圖像互換不工作

Question

我有這樣的腳本：

jQuery(document).ready(function(){ 
    $(".imgSwap").mouseenter(function() { 
    $(this).src("_off").replaceWith("_on"); 
    }).mouseleave(function() { 
    $(this).src("_on").replaceWith("_off"); 
    }); 
}); 

而且這個網站：

<div id="nav"> 
    <table> 
    <tr> 
     <td class="tdleft"> 
     <img src="../../nav/prev_off.png" width="104" height="37" /></td> 
     <td class="tdcenter"> 
     <img src="../../nav/crumb_on.png" width="30" height="30" alt="Pagina 1" /> 
     <img src="../../nav/crumb_off.png" width="30" height="30" /> 
     <img src="../../nav/crumb_off.png" width="30" height="30" /></td> 
     <td class="tdright"> 
     <a href="p02.html"><img class="imgSwap" src="../../nav/next_off.png" width="104" height="37" /></a></td> 
    </tr> 
    </table> 
</div> 

我無法說服我帶班imgSwap圖像交換上的mouseenter或鼠標離開。 我覺得問題出在代碼replaceWith-part。 但我不知道如何解決它，並且我無法找到一個清晰的例子（至少在我看來）在Stack Overflow上。

Answer 1

而不是

$(this).src("_off").replaceWith("_on"); 

使用

this.src = this.src.replace("_off", "_on"); 

你想要做的src字符串替換而replaceWith做DOM元素的替代品。

你也應該使用hover可能簡化代碼：

$(function(){ 
    $(".imgSwap").hover(function() { 
     this.src = this.src.replace("_off", "_on"); 
    }, function(){ 
     this.src = this.src.replace("_on", "_off"); 
    }); 
});