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-我在on addEventListener绑定中移动了这一行 2-我使用this来访问您正在循环的当前元素，而不是访问数组。

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

绑定是一个动态过程。你所做的是在绑定之前捕获attr的值，因此，你得到一个静态字符串。然后在绑定期间，您决定将静态字符串分配给大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>

带缩略图的产品图库

1 个答案: