使用 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

您需要使用反斜杠转义您的 " " " **\**

Answer 2

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

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

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

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

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

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

使用 jQuery 和 JSON 在 div 中设置背景...

On setting background in a div using jQuery and JSON...

html

javascript

css

jquery

json