javascript - 带缩略图的产品图片库

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 循环 期间获取图像的属性，然后将其用于绑定(bind)事件。

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

我怀疑变量总是存储最后一个值。因此，我做了两件事: 1- 我将此行移到 on addEventListener 绑定(bind)中 2- 我使用 this 来访问您循环访问的当前元素，而不是访问数组。

我认为通过在绑定(bind)之前捕获attr的值会导致图像src的值是静态的。但是，通过在绑定(bind)事件期间获取值，您将确保获取被单击的元素属性值。

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

欢迎任何人提供更好的解释。

这是工作代码的示例。

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>