我有代码从提要中加载数据。您可以检查jsfiddle here。
<div class="agenda"></div>
<div class="agenda"></div>
<script>
label = ["Tutorials", "Widgets"];
for (m = 0; m < label.length; m++) {
function listEvents(json) {
var feed = json.feed;
for (var i = 0; i < 10; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
//Style
if (i == 0) {
x = "<span style='color:red'>Style 1 + Label 1</span><p>" + posttitle + "</p>";
p = "<span style='color:red'>Style 2 + Label 2</span><h4>" + posttitle + "</h4><p>";
}
if (i == 1) {
y = "<p>" + posttitle + "</p>";
g = "<h4>" + posttitle + "</h4></p>";
}
}
style = [x + y, p + g];
for (m = 0; m < style.length; m++) {
document.getElementsByClassName("agenda")[m].innerHTML = style[m];
}
}
document.write("<script src=\"http://www.allbloggertricks.com/feeds/posts/default/-/" + label[m] + "?orderby=published&alt=json-in-script&callback=listEvents\"><\/script>");
}
</script>
我使用
For
循环从2 Labels (Tutorials, Widgets)
加载数据。对于每个Label,我希望它使用每种样式(在jsfiddle中为
normal and bold
作为示例)。但是我不知道为什么它仅从Label
加载数据。我需要你的帮助。感谢您的所有建议。
最佳答案
这里有几个问题。
控制结构内的功能声明
在任何控件结构中,函数声明(listEvents
函数所具有的内容)均无效。它们必须出现在全局作用域或函数作用域的顶层,而不是在循环,条件等之内。某些引擎在这些结构中容忍它们,猜测您的意思,而其他引擎则更严格。
另一方面,函数表达式可以出现在任何表达式可以出现的任何地方。 (通常还是最好不要将它们放在循环中。)
您可以非常简单地分辨出函数声明和函数表达式之间的区别:如果立即使用构造的值,它就是一个表达式。
函数声明:
function foo() { /* ... */ }
函数表达式:
var f = function() { /* ... */ };
var nf = function foo() { /* ... */ }; // Avoid this on old versions of IE
doSomething(function() { /* ... */ });
重用相同的函数名称
您的代码正在尝试将
loadEvents
设置为JSONP回调。您不需要具有loadEvents
的多个副本,只需要一个副本-并且由于JSONP的工作方式,它必须是全局函数。只要确保在每次抄送JSONP回调时,
loadEvents
中的逻辑都可以处理多次即可。覆盖
m
您正在使用该函数覆盖
m
变量的值。它的使用方式无害,但这仍然不是一个好主意。使用
document.write
document.write
在现代网页或Web应用程序中几乎没有位置。创建一个script
节点,然后将其附加到DOM。在URL查询字符串中使用原始字符串值
您生成脚本标签的代码会将标签的内容附加到查询字符串中,而不对其进行正确编码。尽管现在可以使用标签数组中的特定值,但是如果更改标签数组值,它将损坏。而是使用
encodeURIComponent
对它们进行编码。这是一个最小的更新:
var m, label, parent; // Declare variables!
label = ["Tutorials", "Widgets"];
parent = document.getElementsByTagName('script')[0].parentNode;
for (m = 0; m < label.length; m++) {
var script = document.createElement('script');
script.src = "http://www.allbloggertricks.com/feeds/posts/default/-/"
+ encodeURIComponent(label[m])
+ "?orderby=published&alt=json-in-script&callback=listEvents";
parent.appendChild(script);
}
function listEvents(json) {
var m;
var feed = json.feed;
for (var i = 0; i < 10; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
//Style
if (i == 0) {
x = "<span style='color:red'>Style 1 + Label 1</span><p>" + posttitle + "</p>";
p = "<span style='color:red'>Style 2 + Label 2</span><h4>" + posttitle + "</h4><p>";
}
if (i == 1) {
y = "<p>" + posttitle + "</p>";
g = "<h4>" + posttitle + "</h4></p>";
}
}
style = [x + y, p + g];
for (m = 0; m < style.length; m++) {
document.getElementsByClassName("agenda")[m].innerHTML = style[m];
}
}
在下面重新发表您的评论:
但是它仍然仅加载来自一个“标签”的数据。我想要每种样式,它会加载一个Label。 Style1(普通文本)加载Label1(教程),style2(粗体文本)加载Label2(窗口小部件)。
那是因为您的loadEvents覆盖了议程元素的内容。与其在标记中包含议程元素,不如将它们动态添加到某个容器中可能更好。例如:
<div id="agendas"></div>
然后更改此:
for (m = 0; m < style.length; m++) {
document.getElementsByClassName("agenda")[m].innerHTML = style[m];
}
对此:
var agendas = document.getElementById("agendas");
for (m = 0; m < style.length; m++) {
var agenda = document.createElement('div');
agenda.className = "agenda"; // If you still need this for anything
agenda.innerHTML = style[m];
agendas.appendChild(agenda);
}
我建议对the DOM进行一些阅读,并可能使用一个好的库使这些内容变得更容易-jQuery,YUI,Closure或any of several others。