尝试在悬停时更改图像但获得 $var.attr 不是函数错误

Posted 2023-05-09

【中文标题】尝试在悬停时更改图像但获得 $var.attr 不是函数错误

【英文标题】：Trying to change image on hover but getting $var.attr is not a function error

【发布时间】：2020-08-16 10:41:33

【问题描述】：

我试图在将鼠标悬停在另一个较小的缩略图上时更改缩略图（显示颜色变化）。页面上有多组图像。 html 是动态生成的，所以我通过 JQuery 分配 ID。

我用来为每个图像分配 id 的代码（这很好用）：

$('.pretty-item .image-container > a img').each(function (index) 
    $(this).attr("id","id" + index);
  );

代码中的问题行：

$('.pretty-item .image-container > a img').each(function() 
var $mainImg = $(this).attr('id');
$(".catalog-tiny-thumbnail").mouseover(function()
var src = $(this).attr("src");
var doubleWidth = $(this).width()*2;
var doubleHeight = $(this).height()*2;
$mainImg.attr($("src"),src);
$mainImg.css("width":doubleWidth,
                                "height:":doubleHeight);
);
);

$mainImg.attr($("src"), src);正在给出 Uncaught TypeError: $mainImage.attr is not a function

我哪里错了？

【问题讨论】：

这也给出了同样的错误。

$mainImg 是我刚刚注意到的 id，所以 $mainImg.attr($("src"),src);应该是 $("#" + mainImg).attr("src", src)。

漂亮！这样可行！谢谢你。然而，小 img 上的悬停正在更改页面上所有大图像的 src。我应该分开功能吗？

如果可能的话，是的。但是鼠标移出应该发生什么？是否应该再次显示原始图像？我用不同的方法制作了一个小提琴（将主图像的 id 设置为缩略图图像的数据属性）jsfiddle.net/1b94c56z

好的。是的，这很完美。我将如何设置它以在鼠标悬停时显示原始图像？

【参考方案1】：

$mainImg 只是图片的id，所以

 $mainImg.attr($("src"),src);

应该是

 $("#" + $mainImg).attr("src",src);

同样适用

 $mainImg.css("width":doubleWidth,"height:":doubleHeight);

应该是

 $("#" + $mainImg).css("width":doubleWidth,"height:":doubleHeight);