Javascript 问题：动态选择img以更改其来源

我正在尝试基于HTML

文件输入更改
img的
src

标记如下所示（请注意，对于调试，我为第二个图像设置了一个id，id为“test”）

它可以工作，但它有
var imgtag=document.getElementById（“test”）var imgtag=$（this.parent（）.parent（）.find（.thumb”）

也许这不是最佳的jquery选择器，但我认为这是一个正确的选择器

怎么了？
如果使用
var imgtag=$（this.parent（）.parent（）.find（“.thumb”）
，则
imgtag
变量是
jquery
对象，而不是对
DOM
对象的引用，因此不能使用
imgtag.src

这里有两个选项：

使用jQuery对象内的第一个元素（它是对DOM元素的引用）：
imgtag[0].src=event.target.result
使用jQuery对象的
attr
函数：
imgtag.attr（'src'，event.target.result）
如果使用
var imgtag=$（this.parent（）.parent（）.find（.thumb”）
，则
imgtag
变量是
jquery
对象，而不是对
DOM
对象的引用，因此不能使用
imgtag.src

这里有两个选项：

使用jQuery对象内的第一个元素（它是对DOM元素的引用）：
imgtag[0].src=event.target.result
使用jQuery对象的
attr
函数：
imgtag.attr（'src'，event.target.result）
您可以使用
.parent（）
，
.prev（）
和
“img”
作为参数返回jQuery对象，后跟
[0]
引用
DOM
元素

var imgtag = $(this).parent().prev("img")[0];

或者如果
html
树保持不变

var imgtag = this.parentElement.previousElementSibling;

注意，
imgtag
引用了
DOM
元素，而不是jQuery对象；其中
title
和
src
是
DOM
元素属性

imgtag.title = selectedFile.name;
imgtag.src = event.target.result;


$（“.editbtn”）。单击（函数（）{
$（this.parent（）.find（“.file input”）.trigger（“click”）；
});
$（“.file input”）.change（函数（事件）{
var selectedFile=event.target.files[0]；
var reader=new FileReader（）；
var imgtag=$（this.parent（）.prev（“img”）[0]；
imgtag.title=selectedFile.name；
reader.onload=函数（事件）{
imgtag.src=event.target.result；
};
reader.readAsDataURL（selectedFile）；
});

编辑
编辑
编辑
编辑
您可以使用
.parent（）
，
.prev（）
和
“img”
作为参数来返回jQuery对象，然后使用
[0]
来引用
DOM
元素

var imgtag = $(this).parent().prev("img")[0];

或者如果
html
树保持不变

var imgtag = this.parentElement.previousElementSibling;

注意，
imgtag
引用了
DOM
元素，而不是jQuery对象；其中
title
和
src
是
DOM
元素属性

imgtag.title = selectedFile.name;
imgtag.src = event.target.result;


$（“.editbtn”）。单击（函数（）{
$（this.parent（）.find（“.file input”）.trigger（“click”）；
});
$（“.file input”）.change（函数（事件）{
var selectedFile=event.target.files[0]；
var reader=new FileReader（）；
var imgtag=$（this.parent（）.prev（“img”）[0]；
imgtag.title=selectedFile.name；
reader.onload=函数（事件）{
imgtag.src=event.target.result；
};
reader.readAsDataURL（selectedFile）；
});

编辑
编辑
编辑
编辑
非常棒的答案，感谢您的解释！我选择了选项2。很好：）您可以同时使用这两个选项（第二个选项比较安全，因为如果没有这样的元素，第一个选项会导致javascript错误）。答案很棒，感谢您的解释！我选择了选项2。太好了：）两个选项都可以使用（第二个选项更安全，因为如果没有这样的元素，第一个选项将导致javascript错误）。