javascript - 单击多个图像javascript不起作用

Question

我正在尝试使用 javascript 使多个图像可点击，所以我有一个 div 有一个大图像，另一个 div 有多个较小的图像，如果我点击多个图像中的一个，它应该变成一个大图像(很明显所有多张图片都可以点击并在点击时更改为大图片)现在的问题是图片不可点击并且在控制台中没有错误，我怎样才能让它们可点击？

这是代码。

Blade

  <div class="bigImage">
   @if(count($product->ProductsPhoto))
       <img src="{{ Storage::url($product->ProductsPhoto[0]->filename) }}"  style="width:400px;" alt=""  class="active" id="currentImage">
       @else
       <h1>no picture</h1>
       @endif
   </div>

  <div class="product-section-images">
      @foreach($product->ProductsPhoto as $product)
       <img src="{{ Storage::url($product->filename) }}" style="width:200px;" class="card-img" alt="">
       @endforeach
     </div>
   @endforeach

Javascript

   <script>
    (function(){
        const currentImage = document.querySelector('#currentImage');
        const images = document.querySelectorAll('.product-section-images');

        images.forEach((element) => element.addEventListener('click', thumbnailClick));

        function thumbnailClick(e) {
          currentImage.src = this.querySelector('img').src;
            currentImage.classList.remove('active');

            currentImage.addEventListener('transitionend', () => {
                currentImage.src = this.querySelector('img').src;
                currentImage.classList.add('active');
            })

            images.forEach((element) => element.classList.remove('selected'));
            this.classList.add('selected');
        }

    })();
</script>

任何帮助将不胜感激

Answer 1

您在 querySelectorAll() 中引用了错误的元素。指定图像元素的类 作为参数的一部分。由于您没有从函数中传递 this，因此您不会在事件处理函数中获得正确的 this。您可以传递 this 以便您可以在函数内部引用它。由于箭头函数 (=>) 确实有自己的 this，您可以将其替换为正常的函数语法。

演示:

(function(){
  const currentImage = document.querySelector('#currentImage');
  const images = document.querySelectorAll('.product-section-images > .card-img');

  images.forEach(function(element){
    element.addEventListener('click', function(){thumbnailClick(this)})
  });

  function thumbnailClick(that) {
    currentImage.src = that.src;
    currentImage.classList.remove('active');

    currentImage.addEventListener('transitionend', () => {
        currentImage.src = that.src;
        currentImage.classList.add('active');
    })

    images.forEach((element) => element.classList.remove('selected'));
    that.classList.add('selected');
  }

})();

<div class="bigImage">
  <img src="/"  style="width:400px;" alt=""  class="active" id="currentImage">

</div>

<div class="product-section-images">
  <img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" style="width:200px;" class="card-img" alt="aa">
  
  <img src="https://cdn.pixabay.com/photo/2018/10/30/16/06/water-lily-3784022__340.jpg" style="width:200px;" class="card-img" alt="bb">
</div>