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

我在jquery 1.9中的图像交换无法正常工作

1 个答案: