javascript - 关于使用 jQuery 和 JSON 在 div 中设置背景...

Question

我一直在研究一种方法来获得一种仅包含 JSON 的数据库，并且我设法让它工作 [谁知道 url 中的“js/”会使其工作？ :'(]

但这不是问题，现在我遇到了 CSS 问题。好吧，让我们解释一下。

我有这个 JSON:

[
    {
        "title":"Facebook",
        "url":"http://www.facebook.com",
        "bg":"../img/facebook.png"
    },
    {
        "title":"Twitter",
        "url":"http://twitter.com",
        "bg":"../img/twitter.png"
    }
]

这个标记:

<section id="links">
           <!-- here should be the <a>'s -->
</section>

还有这个 JavaScript(使用 jQuery):

$(function(){
    $.getJSON('js/links.json', function(data){
        $.each(data, function(index){
            $("#links").append('<a href="'+data[index].url+'" style="background-image:url("'+data[index].bg+'");"><span>'+data[index].title+'</span></a>');
        });
    });
});

现在你说:它应该工作。当然可以，但背景根本不显示。正如我在 inspector 中看到的那样，HTML 似乎变得疯狂了.

好的，那么，哪里出了问题，我应该更改什么？

Answer 1

我认为问题可能出在您定义样式属性的方式上。

style="background-image:url("'+data[index].bg+'");

紧跟在左括号之后的引号是关闭您的样式属性。我认为简单地删除它就可以了

style="background-image:url('+data[index].bg+');

或者，用转义的单引号替换双引号也应该可行

style="background-image:url(\''+data[index].bg+'\');