Нажатие нескольких изображений JavaScript не работает

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().Укажите класс элемента изображения как часть параметра.Поскольку вы не передаете 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

Если вы не возражаете против использования 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');
 });

Демо

Answer 3

Вы присоединяете click слушателя к div с классом product-section-images и в функции thumbnailClick, которую вы используете this.querySelector('img').src;, где this равно div, а querySelector будет alwaysвыберите сначала img и не щелкнете Изображение.

Вместо этого прикрепите прослушиватель щелчка к images, используя document.querySelectorAll('.product-section-images img'), и в thumbnailClick используйте this.src;, где this будет clicked изображением.

const images = document.querySelectorAll('.product-section-images img');  

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

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

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

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