Смена картинки на другую по клику

365

11 мая 2017, 10:27

Задача: сделать смену главной картинки товара при клике на миниатюры товара.

В моём примере на jsfiddle все работает

Но на самом WP сайте почему-то не срабатывает событие клика, хотя, если добавить в скрипт alert('1') к примеру, то событие сработает только 1 раз!

jQuery('.thumbnails img').click(function() {
    var attr = jQuery(this).attr('src');
    var src = jQuery('.main-image img').attr('src');
    jQuery('.main-image img').attr('src', attr);
    jQuery(this).attr('src', src);
});
<div class="images">
  <div class="main-image">
    <img src="https://www.w3schools.com/css/img_fjords.jpg">
  </div>
  <div class="thumbnails columns-3" style="display: block;">
    <img width="184" height="123" src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg" class="attachment-shop_thumbnail size-shop_thumbnail">
  </div>
</div>

В чем ошибка? Скрипт инициализируется в шапке

Answer 1

Есть такая вещь, как очередь выполнения. То есть если у тебя скрипт в шапке, то и его действия разворачиваются в шапке. Ты берешь в переменную атрибут тэга, который ещё не создался, так что перемести свой скрипт перед закрывающим </body> и все должно заработать.

## Вариант 2 ##

Обрами весь код в функцию и сделай так:

window.onload = functionName;

Answer 2

Если этот JS помещен в шапку сайта, то на момент выполнения еще нет селекторов в разметке, с которыми он работает.

Нужно либо переместить скрипт в футер сайта, либо обернуть его в document.ready функция, чтобы отложить его выполнение до окончания загрузки всех элементов разметки.

jQuery( document ).ready(function() { 
	jQuery('.thumbnails img').click(function() { 
	    var attr = jQuery(this).attr('src'); 
	    var src = jQuery('.main-image img').attr('src'); 
	    jQuery('.main-image img').attr('src', attr); 
	    jQuery(this).attr('src', src); 
	}); 
});