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

多张图片（xml-> javascript-> CSS）被覆盖，仅显示1张图片

1 个答案: