注意多個元素沒有多個if語句

Question

我有一個片段，它在滾動時會檢查元素是否在當前視口中。

我現在想要添加多個元素到混合中，但我想避免做多個if語句檢查每個元素，我知道下面的代碼不起作用，但它是我想如何做的一個例子，有沒有辦法這樣做？

var listOfPanels = $('#item2, #item2, #item3, #item4, #item5'); 

$(window).scroll(function(event) { 
    // if the element we're actually looking for exists 
    if (listOfPanels.length){ 

    // check if the element is in the current view using the attached function 
    // and the event hasn't already fired 
    if (isElementInViewport(listOfPanels)) { 

     // do something 
    } 
    } 
}); 

Answer 1

試試這個：（從帶來isElementInViewport JS方法：How to tell if a DOM element is visible in the current viewport?）

function isElementInViewport(el) { 
    var top = el.offsetTop; 
    var left = el.offsetLeft; 
    var width = el.offsetWidth; 
    var height = el.offsetHeight; 

    while(el.offsetParent) { 
    el = el.offsetParent; 
    top += el.offsetTop; 
    left += el.offsetLeft; 
    } 

    return (
    top < (window.pageYOffset + window.innerHeight) && 
    left < (window.pageXOffset + window.innerWidth) && 
    (top + height) > window.pageYOffset && 
    (left + width) > window.pageXOffset 
); 
} 

var listOfPanels = $('#item2, #item2, #item3, #item4, #item5'); 
$(window).scroll(function(event) { 
    if (listOfPanels.length){ 
    listOfPanels.each(function(){ 
     if (isElementInViewport($(this)[0])) { 
     console.log($(this).attr('id') + ' in viewport'); 
     } 
    }); 
    } 
}); 

希望幫助。