当页面上有多个 post 时，如何从 post 中的图像中获取 'src' 并使其成为 post 和 jquery 的背景图像？

Question

抱歉，如果这个问题太啰嗦了。基本上这就是我想要做的：
这是 html 标记：

<article class="swiper-slide">
    <div class="image"></div>
    <div class="copy">
        <h1 class="index-name"><span>Jean-Michel Basquiat</span></h1>
        <div class="article-summary">
            <img src="img/profiles/profile_jbasquiat.jpg"/>
            <h2>Preview Copy</h2>
            <a href="#" class="read-more serif">read more</a>
        </div>
    </div>
</article>

<article class="swiper-slide">
    <div class="image"></div>
    <div class="copy">
        <h1 class="index-name"><span>Lorraine Vivian Hansberry</span></h1>
        <div class="article-summary">
            <img src="img/profiles/profile_lhansberry.jpg"/>
            <h2>Preview Copy</h2>
            <a href="#" class="read-more serif">read more</a>
        </div>
    </div>
</article>

所以我要做的是在每个 div 中为 img 元素取 src 和 class .article-summary，然后将上面的class .image相关联的div做成背景图。现在我在过去使用这个脚本取得了成功，但只有当我在每个帖子的单独页面上时。它针对所有内容，因此我为所有背景图像获得了相同的图像：

var img = $('.article-summary img').attr('src');
$('.image').css('background-image', 'url('+img+')');

我环顾四周，在另一个 Whosebug post 上找到了这个脚本，但我也无法让它工作。我的图像只是显示为空白。我不是 JavaScript 工作逻辑方面的专家，所以我想在这里请教专家。

关于如何让它工作有什么建议吗？

Answer 1

$('.swiper-slide').each(function(){

  var img = $(this).find('.article-summary img').attr('src');
  $(this).find('.image').css('background-image', 'url('+img+')');
});

您需要为每张幻灯片执行此操作 - 类似于上面的方法应该有效。

当页面上有多个 post 时，如何从 post 中的图像中获取 'src' 并使其成为 post 和 jquery 的背景图像？

How to take the 'src' from an image in a post and make it a background image just for that post with jquery when there's multiple posts on page?

javascript

css

jquery

image

background-image