javascript - 从较低的 div 获取背景图像 url 以将它们添加到较高的 div

Question

我正在尝试放置一个较低 div 的背景图像 url，并将它们添加到较高的 div。问题是，有许多带有背景图像的较低 div，并且它们都具有相同的类名。总的来说，我正在尝试使用 drupal 7 构建一个视差主题。愿景是流式传输我所有的新闻，将背景图像放在 100vh 上，将内容放在白框中的中间并让它们视差滚动。我正在处理 View 。我有一个 View 显示所有带有以下字段的新闻:标题、图片、正文。 image-field是一个background-image字段，所以正常显示的div得到的是original-image url作为background-image-url。

我无法将 .bg-holder 的 url 放入 .section.jumbotron。或者还有其他解决办法吗？

<div class="section jumbotron">
    <div class="views-field views-field-title">
        <h1 class="field-content"><a href="/drupal/node/4">HEADLINE</a></h1>
    </div>
    <div class="views-field views-field-field-image">
        <div class="field-content">
            <div class="bg-holder" style="background-image: url(http://localhost/drupal/sites/default/files/styles/large/public/field/image/wallhaven-157066.jpg?itok=2BHBQSVa); background-attachment: scroll; background-size: 1903px;"></div>
        </div>
    </div>
    <div class="views-field views-field-body">
        <p class="field-content">LOREM</p>
    </div>
</div>

我 body 的 fiddle : http://jsfiddle.net/anLL1uop/2/

Answer 1

我不确定我是否 100% 理解您的问题，但是要将“jumborton”的背景更改为特定 bg-holder 的背景，我会给每个人一个唯一的 ID，这样他们就可以拥有相同的样式(因为它们是同一个类)，但是 ID 可以让你告诉 jQuery 你想要哪个背景图像。我还会为 css 文件中的每个设置背景图像，而不是做

<div style="background-image: url(...);"

这是一个 jsfiddle，向您展示了我的意思。它具有使用其 id 将 jumbotron 的背景更改为单击的 div 的背景所需的 jQuery。 https://jsfiddle.net/mahmudzero/anLL1uop/23/