I wrote a script, the task of which is to find all the elements with the .product class on the page and change the thumbnails when the mouse is moved, but something does not work as expected ....

Questions in the comments code, which is attached below.

function Product(elem, imagesBox) { this.product = elem; if(!this.product) { return; } else { self = this; this.imagesBox = this.product.querySelector(imagesBox); this.imagesBox.style.display = 'none'; this.images = this.product.querySelectorAll('img'); this.event = function() { function startSlider(elem,i) { function getImgSrc(src) { var arrSrc = []; for(var i = 0; i < self.images.length; i++) { arrSrc.push(self.images[i].getAttribute(src)); } return arrSrc; } var src = getImgSrc('src'); var srcset = getImgSrc('srcset'); elem.setAttribute('src', src[i]); elem.setAttribute('srcset', srcset[i]); if(i == self.images.length - 1) { i = 0; } else { i++; } var timer = setTimeout(startSlider, 1000, elem, i); self.product.addEventListener('mouseout', function () { clearTimeout(timer); //непонятно как то устанавливает значения атрибутов, ведь должен при уходе мыши ставить //первые элементы соответствующих массивов, //а ставит предшествующую показанной. elem.setAttribute('src', src[0]); elem.setAttribute('srcset', srcset[0]); }); } self.product.addEventListener('mouseover', function (event) { if(event.target == self.product.querySelector('img')) { var i = 1; startSlider(event.target, i); } else return; }); } this.event(); } } function Products(ids) { this.products = document.querySelector(ids); if(!this.products)return; for(var i = 0; i < this.products.children.length; i++) { //присвоение происходит только последнему ребенку коллекции, почему?Точнее метод event класса Product работает только на последнем элементе. this.products.children[i] = new Product(this.products.children[i], '.thumbnails'); } } var products = new Products('.products');

    1 answer 1

    And what if events are replaced by mouseenter and mouseleave ?

    • I think it will not work, there is no delegation, in fact, the mouse goes to <li>, <a> is in it, and already there is a picture in <a>. - pepel_xD