在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"); 
    }); 
});