Javascript 带有缩略图的产品图像库

如果有人能帮我的话，我有一个问题，当我点击缩略图图像以使其显示在大div中时，结果是即使我点击其他任何一个，最后一个也只会出现

var bigImg=document.querySelector.bigImg； var thumbImg=document.queryselectoral.thumbImg'； 对于var i=0；i<拇指长度；i++{ var thumbImgAtt=thumbImg[i].getAttributesrc； thumbImg[i]。addEventListenerclick，函数{ setAttribute'src'，thumbImgAtt； } } 比基姆先生{ 宽度：250像素 } Thumbimg先生{ 宽度：100px；显示：inlineblock； }

---

我刚刚更改了你的js代码的一行。我移动了获取图像属性的行

在脚本中，在for循环期间获取图像的属性，然后将其用于绑定事件

  var thumbImgAtt = thumbImg[i].getAttribute("src");

我怀疑变量总是存储最后一个值。因此，我做了两件事： 1-我在addEventListenerbinding中移动了这一行 2-我使用它来访问您正在循环的当前元素，而不是访问数组

我认为，通过在绑定之前捕获attr的值，将导致图像src的值是静态的。但是，通过在绑定事件期间获取该值，您将确保获取单击的item attr值

绑定是一个动态过程。您所做的是在绑定之前捕获attr的值，因此得到一个静态字符串。然后在绑定期间，您决定将静态字符串分配给大div。您不应该捕获绑定之外的元素的值。例如，如果其他脚本更改源怎么办

欢迎其他人提供更好的解释

下面是工作代码的示例

var bigImg=document.querySelector.bigImg； var thumbImg=document.queryselectoral.thumbImg'； 对于var i=0；i<拇指长度；i++{ //我刚更改了你访问图像src的位置 //var thumbImgAtt=thumbImg[i].getAttributesrc； thumbImg[i]。addEventListenerclick，函数{ //从“this”获取此处的属性 让thumbImgAtt=this.getAttributesrc； setAttribute'src'，thumbImgAtt； }; } 比基姆先生{ 宽度：250像素 } Thumbimg先生{ 宽度：100px； 显示：inlineblock； }

---

有些东西看起来像是在循环，它总是循环通过并选择最后一个元素。请检查我的答案。@KareemNagy如果我的答案真的解决了你的问题。请考虑通过在答案旁边的投票按钮下检查复选标记来选择它。如果您的解决方案需要进一步详细说明，请询问我，我将很乐意回答。