javascript - 与 attr 混淆以与 mouseover() 和 mouseout()(图像交换)一起使用

Question

我正在使用 jQuery 在悬停时切换图像。这是我的代码。HTML

<img class="commentImg" src="images/comments.png" data-swap="images/comment_hover.png" alt="">  

jQuery

$(".commentImg").hover(function() {
     var swap = $(this).attr("data-swap");
     $(this).attr('src', swap);
},
function() {
     var swap = $(this).attr("data-swap");
     $(this).removeAttr(swap);
 });  

mouseover 工作正常，但 mouseout 不行。你们能帮帮我吗？

Answer 1

你需要存储它

//store current src in a attribute
$(".commentImg").attr('data-src', function() {
  return $(this).attr('src');
})
$(".commentImg").hover(function() {
  var swap = $(this).attr("data-swap");
  $(this).attr('src', swap);
}, function() {
  var src = $(this).attr("data-src");
  $(this).attr('src', src);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img class="commentImg" src="//placehold.it/64/ff0000" data-swap="//placehold.it/64/ff00ff" />
<img class="commentImg" src="//placehold.it/64/00ff00" data-swap="//placehold.it/64/ffff00" />
<img class="commentImg" src="//placehold.it/64/0000ff" data-swap="//placehold.it/64/00ffff" />