多張圖片（xml-> javascript-> CSS）被覆蓋，僅顯示1張圖片

Question

我正在構建一個簡單的抓取應用程序，該應用程序從具有以下格式的XML中提取數據：

<entry>
  <title>Title of something</title>
  <summary>https://link_to_image_used_in_background</summary>
  <link>www.link-to-website.com</link>
</entry>

正在被javascript閱讀：

$(document).ready(function() {
    loadRSS('http://website.com/file.xml', '#Newsfeed', 'Heise');   
});

    function loadRSS(link, htmlContainer, author) {
        var url = link;
        var container = $(htmlContainer);
        feednami.load(url, function(result){
            if (result.error) {
                console.log(result.error);
            } else {
                var entries = result.feed.entries;
                for(var i = 0; i < 50; i++){
                    container.append("<li class=\"RSScard\"><p><h2>" 
                        + "<a href=\"" + entry.link + "\" target=\"_blank\">" + entry.title + '</a> ' 
                        + "</h2></p>"+ author +"</li>");

                var bg_url = entry.summary
                    $(function () {
                        $(".RSScard").css({
                            backgroundImage: "url('" + bg_url + "')"
                        });
                    });
                }
            }
        });
    }

並傳遞給CSS：

body {
  background: #444;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    font-family: 'Roboto', sans-serif;
    margin:0;
    padding:0;
}

ul {
    list-style-type: none;
}

#Newsfeed {
  max-width: 1350px;
  margin: 0 auto;
  padding-top: 25px;
  padding-bottom: 65px;
}

.RSScard {
    padding: 20px 25px;

    margin-left: 20px;
    margin-top: 20px;

    min-width: 200px;
    max-width: 200px;
    min-height: 225px;

    opacity: .87;
    background-image: var(plink);;

  color: #388E3C;
  font-size: 0.85em;
    text-align: center;
    overflow: hidden;
    box-shadow: 0 0 8px rgba(0,0,0, 0.25);
    float:left;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.RSScard a {
    text-decoration: none;
    color: #ededed;
  font-size: 0.75em;
    font-weight: 300;
    opacity: 1;
}

.RSScard:hover {
    opacity: 1;
    background-color: #202B33;
}

....我的問題是，盡管標題和鏈接正確地寫入了各自的空間，但每個空間的背景圖像都被最后一個xml條目的“摘要”子級覆蓋。 我為可能的不良編碼和格式表示歉意-我最初選擇了Tobias Totz的rss閱讀器/ feeder（ https://codepen.io/tobias-totz/pen/rrJXqo ）並嘗試對其進行熱線連接。 謝謝你的幫助！

Answer 1

這里的問題是在循環的每次迭代中，您都將背景圖像設置為RSScard類的所有元素。 這就是為什么您只能看到最后一個項目圖像的原因，因為您已覆蓋了之前的圖像。

您將需要執行以下操作，為每個實體設置不同的圖像：

for(var entry in entries){
  var $listElement = $("<li class=\"RSScard\".... </li>");

  container.append($listElement);

  $listElement.css({
      backgroundImage: "url('" + entry.summary + "')"
  });   
}