如何從文章中的圖像中獲取'src'，並在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> 

那麼我現在要做的是採取src在每個div與類.article-summary的img元素，然後進行即相關的div的背景圖像與上面的類.image。現在我已經成功地使用了這個腳本，但只有當我在每個帖子的單獨頁面上。它的目標是一切，所以我得到了所有的背景圖像相同的圖像：

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+')'); 
}); 

你需要爲每張幻燈片做 - 這就像上面的應該工作。