我在jQuery 1.9中的圖片交換不起作用

Question

我有這個腳本：

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

而這個html：

<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或mouseleave上交換。 我認為問題出在代碼的replaceWith部分 。 但是我不知道如何解決它，我也沒有在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");
    });
});