javascript - 多张图片(xml -> javascript -> CSS)被覆盖，只显示一张图片

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 阅读器/馈线(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 + "')"
  });   
}