Question

我正在尝试使用javascript使多个图像可点击，因此我有一个div具有较大的图像，另一个div具有较小的多个图像，如果单击多个图像之一，则应更改为大图像（显而易见所有多个图像都可以单击并在单击时变为大图像）现在的问题是图像不可单击，并且在控制台中没有错误，如何使它们可单击？

这是代码。

刀片

  <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()中引用了错误的元素。指定图像元素的 class 作为参数的一部分。由于您没有从函数传递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>

Answer 2

您将click类的div侦听器附加到product-section-images的{ 您正在使用thumbnailClick的{{1}}函数，其中this.querySelector('img').src;是this并且 div将querySelector首先选择always，而不是单击图像。

请使用img将点击侦听器附加到images，并在document.querySelectorAll('.product-section-images img')中使用thumbnailClick，其中this.src;将是this图像。

clicked

Answer 3

如果您不介意使用Jquery，则可以这样做，

 $(".card-img").click(function() {
     let small_Image_Src = $(this).attr('src');
     $(".card-img.selected").removeClass('selected');
     $(this).addClass('selected');
     let big_Image = $("#currentImage");
     big_Image.attr('src',small_Image_Src);
     big_Image.addClass('active');
 });

Demo

单击多个图像JavaScript不起作用

3 个答案: