在多个 div 上运行 jQuery 函数（从 img 标签获取背景图像并使用 CSS 将其应用为部分背景）答案

【问题标题】：Running a jQuery function on multiple divs (getting background image from img tag and applying it as section background using CSS)在多个 div 上运行 jQuery 函数（从 img 标签获取背景图像并使用 CSS 将其应用为部分背景）
【发布时间】：2019-12-04 21:17:30
【问题描述】：

我正在尝试使用 jQuery 获取每个部分的图像 src 并将其应用于具有 CSS 作为背景图像属性的部分。我需要获取 CMS 加载的图像 URL 并将其添加到使用 CSS 的部分的原因是，我可以使用 background-attachment 属性来固定每个图像，从而产生很酷的视差效果。

页面的html结构基本上是这样的：

<section id="section-1" class="has-background">
  <div class="section-background">
    <img data-src="url-1">
  </div>
</section>

<section id="section-2" class="has-background">
  <div class="section-background">
    <img data-src="url-2">
  </div>
</section>

<section id="section-3" class="has-background">
  <div class="section-background">
    <img data-src="url-3">
  </div>
</section>

我现在的代码不能正常工作，因为它需要第一张图片并将其作为所有部分的背景图片。它确实提供了我想要的视差效果，但我需要每个部分使用自己的图像。

var imageUrl = $('.section-background img').attr("data-src");
  $('.has-background').css({'background-image': 'url(' + imageUrl + ')', 'background-size': 'cover', 'background-attachment': 'fixed'});

所以我的问题是，我如何创建一个函数，从该部分中获取背景图像并使用 CSS 将其应用为背景图像并且为每个具有背景图像的部分执行此操作?

【问题讨论】：

标签： jquery css function

【解决方案1】：

使用.each() 为选择器匹配的每个元素运行一段代码：

$('.section-background img').each(function () {
    var $targetImg = $(this);    // the current img
    var imgSrc = $targetImg.attr('data-src');
    var $parentDiv = $targetImg.closest('.has-background');

    $parentDiv.css(...);
});

【讨论】：

【解决方案2】：

我认为您的问题与我的问题具有相似的逻辑。

您需要设置一个目标应该放置脚本/命令的位置。
您可能想要使用.next() 和each()，或设置data-target="#targetId" 将脚本放在特定元素上。

这是我的帖子：
How to correctly write jQuery toggle button that can work individualy?

【讨论】：