Question

我对jQuery很新鲜，并尝试更改一个函数以将更改应用于多个div。我使用PrimožCigar的"Neat trick for CSS Object-fit fallback on EDGE"来检测浏览器是否支持Object fit，如果不支持，则将图像的src复制到容器的背景图像源。这非常有效，但我的问题是我有四个不同的图像容器div我需要定位以应用相同的功能。

{{1}}

假设我想将相同的函数应用于.header__image-container和.banner__image-container如何正确重构上面的代码？

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');
    }  
  });
}

在jQuery中检查多个容器

1 个答案: