javascript - 当页面上有多个帖子时，如何使用 jquery 从帖子中的图片中获取 'src' 并使其成为该帖子的背景图片？

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 类 。 article-summary，然后用上面的类.image做成相关div的背景图。现在我在过去使用这个脚本取得了成功，但只有当我在每个帖子的单独页面上时。它针对所有内容，因此我为所有背景图像获得了相同的图像:

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

我环顾四周，在另一个 stackoverflow 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+')');
});

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