删除部分 img src

Question

我有 20 张图片和相同的 20 张不同颜色的图片以相同的名称命名，但第二张带有后缀“_blu”->“google.jpg”，另一张为“google_blu.jpg” 我会做一个鼠标悬停以将其从一个更改为另一个。

我试过这样，但我不知道如何定位图像（我可以说“.hovertondo 类中的每个图像）

jQuery(document).ready(function($) {
$(".hovertondo").css("opacity","1");

    $(".hovertondo").hover(function () {
        var src = $(this).attr('src');
        $(this).attr('src', src.replace('_blu', ''));
        $(this).stop().animate({opacity: 0}, "slow");

        },function () {$(this).stop().animate({opacity: 1}, "slow");
                       $(this).attr('src', src.replace('_blu', ''));

        });
});

HTML

<div class="conttondodentosofia">
<img src="http://studiodentisticocova.com/img/trattamenti/carie_blu.jpg" />
<div class="hovertondo">Carie</div>
</div>

我用firebug打开它，错误是

"TypeError: $(...).attr(...) is undefined" （谈论这一行 $(this).attr('src', src.replace('_blu', '')） ;)

有人帮助我吗？ :) 谢谢！

Answer 1

src 未在您的 mouseleave 处理程序中定义（hover 方法的第二个参数）：

改变这个

$(".hovertondo").hover(function () {
        var src = $(this).attr('src');
        $(this).attr('src', src.replace('_blu', ''));
        $(this).stop().animate({opacity: 0}, "slow");

        },function () {$(this).stop().animate({opacity: 1}, "slow");
                       $(this).attr('src', src.replace('_blu', ''));

        });

到

$(".hovertondo").hover(function () {
        var src = $(this).attr('src');
        $(this).attr('src', src.replace('_blu', ''));
        $(this).stop().animate({opacity: 0}, "slow");

        },function () {
        var src = $(this).attr('src');
        $(this).stop().animate({opacity: 1}, "slow");
        $(this).attr('src', src.replace('_blu', ''));

        });

顺便说一句，你在这两种情况下都在制作$(this).attr('src', src.replace('_blu', ''));。有时您必须将“_blu”添加到您的 src。它会给出类似的东西：$(this).attr('src', src.replace('.jpg', '_blu.jpg'));

编辑

您可以使用fadeOut方法进行平滑的图像修改：

$('this').fadeOut(300, function(){
      $(this).attr('src', src.replace('_blu', '')).bind('onreadystatechange load', function(){
         if (this.complete) $(this).fadeIn(300);
      });
   });