带缩略图的产品图片库

Question

请问是否有人可以帮助我解决这个问题，当我单击“缩略图”图像使它出现在大div中时，结果是即使我单击其他任何一个，也只能出现最后一个

  var bigImg = document.querySelector(".bigimg"); var thumbImg = document.querySelectorAll('.Thumbimg'); for ( var i = 0; i < thumbImg.length; i++) { var thumbImgAtt = thumbImg[i].getAttribute("src"); thumbImg[i].addEventListener("click", function(){ bigImg.setAttribute('src', thumbImgAtt); }) } 

 .bigimg { width:250px } .Thumbimg { width:100px; display:inlineblock; } 

  <div class="services-gallary"> <div class="column-medium__12"> <img class="bigimg" src="https://s3-us-west-2.amazonaws.com/phonation/uploads/393252621147661500986254.jpg" alt="" /> </div> <div class="column-medium__4"> <img class="Thumbimg" src="https://s3-us-west-2.amazonaws.com/phonation/uploads/598327478840211500986246.jpg" /> </div> <div class="column-medium__4"> <img class="Thumbimg" src="https://s3-us-west-2.amazonaws.com/phonation/uploads/393252621147661500986254.jpg" /> </div> <div class="column-medium__4"> <img class="Thumbimg" src="https://s3-us-west-2.amazonaws.com/phonation/uploads/152761388580121500986248.jpg" /> </div> </div> 

Answer 1

我只是更改了您的js代码的一行。 我将行移到获得Image Attribute 。

在脚本中，您可以在for loop获取图像的属性，然后将其用于绑定事件。

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

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

我认为通过在绑定之前捕获attr的值将导致图像src的值是静态的。 但是，通过在绑定事件中获取值，可以确保获取被单击项的attr值。

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

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

这是工作代码示例。

 var bigImg = document.querySelector(".bigimg"); var thumbImg = document.querySelectorAll('.Thumbimg'); for (var i = 0; i < thumbImg.length; i++) { //I just changed where you get access to the src of image // var thumbImgAtt = thumbImg[i].getAttribute("src"); thumbImg[i].addEventListener("click", function() { //Get the attributes here from 'this' let thumbImgAtt = this.getAttribute("src"); bigImg.setAttribute('src', thumbImgAtt ); }); } 

 .bigimg { width: 250px } .Thumbimg { width: 100px; display: inlineblock; } 

 <div class="services-gallary"> <div class="column-medium__12"> <img class="bigimg" src="https://s3-us-west-2.amazonaws.com/phonation/uploads/393252621147661500986254.jpg" alt="" /> </div> <div class="column-medium__4"> <img class="Thumbimg" src="https://s3-us-west-2.amazonaws.com/phonation/uploads/598327478840211500986246.jpg" /> </div> <div class="column-medium__4"> <img class="Thumbimg" src="https://s3-us-west-2.amazonaws.com/phonation/uploads/393252621147661500986254.jpg" /> </div> <div class="column-medium__4"> <img class="Thumbimg" src="https://s3-us-west-2.amazonaws.com/phonation/uploads/152761388580121500986248.jpg" /> </div> </div>