带数组的Intersection Observer API

时间:2019-01-27 12:18:12

标签: javascript html observers

我建立了一个交互观察者,它应该处理元素组并使用switch语句,如下所示。这是要遍历项目(元素列表)并将图像源应用于这些元素中的每个元素。目前由于我认为我在错误地处理查询选择器而无法正常工作。任何帮助,将不胜感激。目前我的图像都没有加载。

const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
        if(entry.isIntersecting === true) {
            switch(entry){
                case('#header.masthead'):
                    const headerimg = entry.target.querySelector('#header.masthead');
                    entry.target.classList.add('inview');
                    headerimg.src = 'img/Main/corby-overview.svg';
                    break;
                case('#corbymap'):
                    const corbyimg = entry.target.querySelector('#corbymap');
                    entry.target.classList.add('inview');
                    corbyimg.src = 'img/Location/corbymap.jpg';
                    break;
                case ('.portfolio-box'):
                    const eachPortfolio = entry.target.querySelectorAll('remediationBox > img, masterplanBox > img, developmentBox > img, investmentBox > img');
                    entry.target.classList.add('inview');
                    eachPortfolio.src = ['img/Services/Thumbnail/newarkBulldozer.jpg', 'img/Services/Thumbnail/masterplanWeston.jpg', 'img/Services/Thumbnail/westonGolf.jpg', 'img/Services/Thumbnail/wesair.jpg'];
                    break;
            }
        }
        else {
            entry.target.classList.remove('inview');
        }
    });
});

const items = document.querySelectorAll('#header.masthead, .corbymap, .portfolio-box, #carousel');
;

items.forEach((item) => {
    observer.observe(item);
})

observer();

0 个答案:

没有答案