我建立了一个交互观察者,它应该处理元素组并使用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();