javascript - 我在 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 上进行交换。我认为问题出在代码的替换部分。但我不知道如何解决它，我也找不到关于 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");
    });
});