Javascript 我需要创建一个图像库，其中一个图像在单击时更改不透明度，但在另一个图像被单击时恢复

我已经为这个挣扎了好几个小时了。我有一个从API输入的图像库

我需要一个图像来更改单击时的不透明度，并在再次单击和/或单击库中的其他图像时恢复为其原始不透明度

我已经设法得到它，所有的图像在一个被点击时发生变化，每个图像在被点击时发生变化，但不恢复以前点击的图像，但我似乎无法将两者结合起来

我必须使用香草JS。我在这里浏览了各种类似的问题，但似乎没有一个能解决我的问题

这是我的代码

var URL=new Array（）；
URL[0]=”https://www.vam.ac.uk/api/json/museumobject/search?q=a&limit=45";
URL[1]=”https://www.vam.ac.uk/api/json/museumobject/search?q=a&limit=45&offset=45";
URL[2]=”https://www.vam.ac.uk/api/json/museumobject/search?q=a&limit=45&offset=90";
var nRequest=新数组（）；
对于（变量i=0；i<3；i++）{
（职能（一）{
nRequest[i]=新的XMLHttpRequest（）；
nRequest[i]。打开（“GET”，URL[i]，true）；
nRequest[i].onreadystatechange=函数（oEvent）{
if（nRequest[i].readyState==4）{
如果（nRequest[i]。状态===200）{
var data=JSON.parse（nRequest[i].responseText）；
var url='1〕http://media.vam.ac.uk/media/thira/collection_images/';
for（让我们输入数据记录）{
让value=data.records[key]；
让image=value.fields.primary\u image\u id；
设res=image.substr（0,6）；
document.querySelector（“.image”）.innerHTML+=''；
document.querySelector（“.mypanel”）.innerHTML+='Title:'+value.fields.Title+'
'+
“艺术家：”+value.fields.Artist+“
”+
“对象类型：”+value.fields.Object+“
”+
“位置：”+value.fields.Location+“
”+
“Place:”+value.fields.Place+“
”+
“
”；
}
}否则{
console.log（“错误”，nRequest[i].statusText）；
}
}
//
};
nRequest[i]。发送（空）；
})（i） )；
};
。图像img{
身高：215px；
宽度：20%；
对象匹配：覆盖；
不透明度：0.5；
}
.图像img：悬停，
.图像img：聚焦，
.图像img：活动{
不透明度：1；
}
.inlineFlex{
显示：内联flex；
}
mypanel先生{
宽度：50%；
}
.mypanel分区{
显示：无；
}
.形象{
宽度：50%；
高度：500px；
溢出y：自动；
}

一种方法

如果图像已高亮显示，则首先存储
联合国强调所有这些问题
最后，根据您存储的内容切换您单击的内容
下面是一个简单的示例，您应该能够根据自己的需要进行修改


document.body.addEventListener（'click'，（e）=>{
常数el=e.目标；
如果（el.tagName！==“DIV”）返回；
const wasSel=el.classList.contains（'selected'）；
for（document.querySelectorAll（'div'）的常数d）
d、 classList.remove（'selected'）；
el.classList.toggle（'selected'，！wasSel）；
});
div{
填充：1rem；
保证金：0.2rem；
宽度：3rem；
高度：3雷姆；
边框：1px纯黑；
显示：内联块；
背景颜色：粉红色；
不透明度：0.4；
用户选择：无；
过渡：不透明度0.2s；
}
选定部门{
不透明度：1；
}
onetwofreefivesixeveneightneten
一种方法

如果图像已高亮显示，则首先存储
联合国强调所有这些问题
最后，根据您存储的内容切换您单击的内容
下面是一个简单的示例，您应该能够根据自己的需要进行修改


document.body.addEventListener（'click'，（e）=>{
常数el=e.目标；
如果（el.tagName！==“DIV”）返回；
const wasSel=el.classList.contains（'selected'）；
for（document.querySelectorAll（'div'）的常数d）
d、 classList.remove（'selected'）；
el.classList.toggle（'selected'，！wasSel）；
});
div{
填充：1rem；
保证金：0.2rem；
宽度：3rem；
高度：3雷姆；
边框：1px纯黑；
显示：内联块；
背景颜色：粉红色；
不透明度：0.4；
用户选择：无；
过渡：不透明度0.2s；
}
选定部门{
不透明度：1；
}
onetwofreefivesixseveneightnineten
创建一个名为active的类，并在单击时添加和删除。我创建了一个片段


var URL=new Array（）；
URL[0]=”https://www.vam.ac.uk/api/json/museumobject/search?q=a&limit=45";
URL[1]=”https://www.vam.ac.uk/api/json/museumobject/search?q=a&limit=45&offset=45";
URL[2]=”https://www.vam.ac.uk/api/json/museumobject/search?q=a&limit=45&offset=90";
var nRequest=新数组（）；
对于（var i=0；i创建一个名为active的类，并在单击时添加和删除。我创建了一个代码段


var URL=new Array（）；
URL[0]=”https://www.vam.ac.uk/api/json/museumobject/search?q=a&limit=45";
URL[1]=”https://www.vam.ac.uk/api/json/museumobject/search?q=a&limit=45&offset=45";
URL[2]=”https://www.vam.ac.uk/api/json/museumobject/search?q=a&limit=45&offset=90";
var nRequest=新数组（）；
对于（var i=0；单击时i
并再次单击时还原为其原始不透明度
这一部分是否不重要，因为接受的答案似乎并不重要。当我实现此答案时，我意识到我实际上不需要该功能。感谢您在单击时突出显示它！
并还原为其原始不透明度再次单击时的不透明度
这部分不重要，因为接受的答案似乎不重要。当我实现此答案时，我意识到我实际上不需要该功能。不过感谢您突出显示它！