在多個 div 上運行 jQuery 函數（從 img 標簽獲取背景圖像並使用 CSS 將其應用為部分背景）

Question

我正在嘗試獲取每個部分的圖像 src 並使用 jQuery 將其應用到帶有 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 將其應用為背景圖像，並為每個具有背景圖像的部分執行此操作？

Answer 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(...);
});

Answer 2

我認為你的問題和我的問題有相似的邏輯。

您需要設置應該放置腳本/命令的目標。
您可能希望使用.next()和each() ，或設置data-target="#targetId"將腳本放在特定元素上。

這是我的帖子：
如何正確編寫可以單獨工作的jQuery切換按鈕？