Я пытаюсь создать динамическую функцию, используя цикл for в javascript, который будет запускать ролловеры. Я использую JS против CSS, так как количество изображений, которые будут перемещаться, растет, и я полагаю, что функцию легче поддерживать, чем x количество селекторов.
Это создает on method похожий на jQuery.
var on = function(event, elem, callback, capture) {
if (typeof elem === 'function') {
capture = callback;
callback = elem;
elem = window;
}
capture = capture ? true : false;
elem = typeof elem === 'string' ? document.querySelector(elem) : elem;
if (!elem) return;
elem.addEventListener(event, callback, capture);
};
Это мои функции rollOver и rollOut:
function rollOver(elem) {
document.getElementById(elem).src = `/images/home-page/desktop/EYES_ON_YOU_desktop_HP_HOVER_${elem.slice(length-1)}.jpg?$staticlink$`
}
function rollOut(elem) {
document.getElementById(elem).src = `/images/home-page/desktop/EYES_ON_YOU_desktop_HP_NO_HOVER_${elem.slice(length-1)}.jpg?$staticlink$`
}
И вот где живет мой цикл for:
document.addEventListener("DOMContentLoaded", function(event) {
var rollOverCollectionA = document.getElementById('roll-over-collection-a').querySelectorAll('img');
rollOverCollectionA = Array.prototype.slice.apply(rollOverCollectionA);
for (var i = 0; i < rollOverCollectionA.length; i++) {
on('mouseover', rollOverCollectionA[i].id, function(){
console.log( rollOverCollectionA[i].id)
rollOver(rollOverCollectionA[i].id);
});
on('mouseout', rollOverCollectionA[i].id, function(){
rollOut(rollOverCollectionA[i].id);
});
}
});