Помогите разобраться с JS, он меня не слушается...

Общее
1

Всем привет! Помогите решить проблему:

Решил добавить жизни в барбершоп, на страницу описания товара. А именно - при нажатии на миниатюру она появляется на месте большой картинки.
С помощью jQuery проблему решил:
$(document).ready(function() {
$(’.img’).click(function() { // img - это класс всех картинок
var i = $(this).attr(‘src’);
$(’#big-image’).attr(‘src’, i); //big-image - id для большой картинки
});

Но я же хочу быть не jQuery разработчиком, и посему решил проверить как оно сработает на ванильном JS. Не сработало…

var img = document.querySelectorAll(’.img’);
var imgBig = document.querySelector(’#big-image’);

img.addEventListener(‘click’, function(event){
var imgSrc=this.getAttribute(‘src’);
imgBig.setAttribute(‘src’, imgSrc);
});

Как я понял из своих экспериментов, я как то не так использую this. Подскажите, что не так?

2

Функция addEventListener применяется к отдельному объекту, в то время как var img = document.querySelectorAll('.img'); возвращает коллекцию объектов.

Чтобы всё заработало, как вы задумали, нужно навесить обработчик на каждую картинку по отдельности в цикле по всем элементам img.

1 лайк
3

Вот тебе и Ваниль =)

4

Спасибо! Теперь понятно почему у jQuery лозунг write less, do more =)

5

Сделал, как Вы советовали, но все равно не работет. Говорит, что Img = undefined

for (i = 0; i <= img.length; i++ ) {
img[i].addEventListener(‘click’, function(event){
var imgSrc = img[i].getAttribute(‘src’);
imgBig.setAttribute(‘src’, imgSrc);
});
};

6 
var imgs = document.querySelectorAll('.img');
var big = document.querySelector('#big-image');

[].forEach.call(imgs, function(img) {
  img.addEventListener('click', function() {
    var src = img.getAttribute('src');
    big.setAttribute('src', src);
  });
});
2 лайка
7

Спасибо! А Вы не подскажите, что не так с моим кодом? Почему этот вариант не срабатывает?
Я в интернете находил такие же примеры

var divs = document.querySelectorAll(‘div’), i;

for (i = 0; i < divs.length; ++i) {
divs[i].style.color = “green”;
}