jquery从文件中加载特定内容

Question

我正在尝试从由标签或其他内容组织的纯文本中获取特定文本；然后加载现有的 div 或动态创建一个 div 来加载它。

不知道用json是否可以

我尝试创建一个 .json 文件 data_prod.js，如下所示:

{"articles":
        [
            {
                "title1":"bla bla bla"
            },
            {
                "title2":"bla bla bla"
            },
            ...
        ]
}

在我的 html 代码中我编写了该函数:

    $.getJSON("data_prod.js",function(data)
        {
            var div_data = data.title1;
            $(div_data).appendTo("#tt_mn");
        });

在这种情况下我想要加载的内容只是现有的名为 #tt_mn 的 div 中的 title1

出了点问题

现在我已经修改了。

data.json

{
   "articles": [{ "title": "fresa" }, { "title": "limon" }, { "title": "naranja" } ]
}

test_json.html

<div id="op">push me</div>  
<div id="tt_mn" data-articleidx="1"></div>
<script>
$('#op').live("click", function() {
    // get the index of the article for which the title should be obtained
    var idx = $(this).data('articleidx');
    $.getJSON("data.json", function(data) {
        // be safe and the data parameter conformity prior to extracting the title
        if (data && data.articles && idx < data.articles.length) {
            $("<div>" + data.articles[idx].title + "</div>").appendTo("#tt_mn");
        }
    });
}); 
</script>

EXAMPLE

Answer 1

您应该首先更改一下 json，以便所有项目都具有相同的“title”属性:

{
   "articles": [{ "title": "title 1" }, { "title": "title 2" }, ... ]
}

然后，在 .getJSON() 函数的回调中，遍历所有项目并生成带有标题值的 html 标记。

我认为应用标记最有效的方法是构建一个表示所需标记的字符串数组并一次将其全部附加。 for 循环也比 jquery .each() 或 .map() 更高效。

$.getJSON("data_prod.js", function(data) {
    var titles = [];
    for (var i=0; i<data.articles.length;i++) {
        titles.push("<div>" + data.articles[i].title + "</div>");
    }
    $(titles.join('')).appendTo("#tt_mn");
});

<强> EXAMPLE

<小时/>

编辑:

因此，如果您想通过单击按钮来显示一个特定标题，您可以添加一个“data-”属性来指定您想要获取标题的哪篇文章:

<button data-articleidx="1">Get title</button>

然后:

$('button').click(function(e) {
    // get the index of the article for which the title should be obtained
    var idx = $(this).data('articleidx');
    $.getJSON("data_prod.js", function(data) {
        // be safe and the data parameter conformity prior to extracting the title
        if (data && data.articles && idx < data.articles.length) {
            $("<div>" + data.articles[idx].title + "</div>").appendTo("#tt_mn");
        }
    });
}); 

我仍然建议您更改 json，使标题具有相同的属性名称。我想不出为什么它们实际上是“title1”，“title2”......