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

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

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

代码中的问题行：

$('.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；正在给出未捕获的TypeError:$mainImage.attr不是函数

---

哪里出错了？

$mainImg

只是图像的id，所以

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

应该是

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

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

这同样适用于

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

应该是哪一个

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

---

$mainImg

只是图像的id，所以

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

应该是

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

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

这同样适用于

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

应该是哪一个

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

---

这也会产生同样的错误。$mainImg是我刚才注意到的一个id，所以$mainImg.attr（$（（“src”），src；应该是$（“#”+mainImg）.attr（“src”，src）。漂亮！真管用！非常感谢。但是，将鼠标悬停在小img上会改变页面上所有大图像的src。我应该把功能分开吗？如果可能的话，可以。但是，在mouseout上应该发生什么呢？是否应再次显示原始图像？我尝试了一种不同的方法（将主图像的ID设置为缩略图的数据属性）OK。是的，太好了。我该如何设置它以在mouseout上显示原始图像？这也会给出相同的错误。$mainImg是我刚才注意到的一个id，所以$mainImg.attr（$（“src”），src；应该是$（“#”+mainImg）.attr（“src”，src）。漂亮！真管用！非常感谢。但是，将鼠标悬停在小img上会改变页面上所有大图像的src。我应该把功能分开吗？如果可能的话，可以。但是，在mouseout上应该发生什么呢？是否应再次显示原始图像？我尝试了一种不同的方法（将主图像的ID设置为缩略图的数据属性）OK。是的，太好了。我如何将其设置为在mouseout上显示原始图像？