檢查jQuery中的多個容器

Question

我對jQuery非常新鮮，並試圖改變一個函數以將更改應用於多個div。我使用PrimožCigar的"Neat trick for CSS Object-fit fallback on EDGE"來檢測瀏覽器是否支持對象適配，如果不支持，請將圖像的src複製到容器的背景圖像源。這工作得很好，但我的問題是我有四個不同的圖像容器div我需要針對應用相同的功能。

if (! Modernizr.objectfit) { 
    $('.post__image-container').each(function() { 
    var $container = $(this), 
     imgUrl = $container.find('img').prop('src'); 
    if (imgUrl) { 
     $container 
     .css('backgroundImage', 'url(' + imgUrl + ')') 
     .addClass('compat-object-fit'); 
    } 
    }); 
} 

可以說，我想應用相同的功能.header__image容器和.banner__image容器如何正確重構上面的代碼？

Answer 1

你應該只能夠添加全局類如container即

HTML

<div class="container container1"></div> 
<div class="container container2"></div> 
<div class="container container3"></div> 

然後調整你的代碼，以便它通過每個.container搜索，而不是一個單獨的類。

if (! Modernizr.objectfit) { 
    $('.container').each(function() { 
    var $container = $(this), 
     imgUrl = $container.find('img').prop('src'); 
    if (imgUrl) { 
     $container 
     .css('backgroundImage', 'url(' + imgUrl + ')') 
     .addClass('compat-object-fit'); 
    } 
    }); 
}