gpt4 book ai didi

javascript - For 循环中的函数问题

转载 作者:行者123 更新时间:2023-11-28 12:33:41 25 4
gpt4 key购买 nike

我有从提要加载数据的代码。您可以查看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 个标签(教程、小部件) 加载数据。

对于每个标签,我希望它使用每种样式(正常和粗体作为jsfiddle中的示例)。但我不知道为什么它只从 Label 加载数据。

我需要你的帮助。感谢您的所有建议。

最佳答案

这里有几个问题。

控制结构内的函数声明

函数声明(您的listEvents函数中的声明)在任何控制结构内都是无效的。它们必须出现在全局作用域或函数作用域的顶层,而不是在循环、条件等内。某些引擎容忍它们在这些结构中,猜测什么你的意思是,但其他人更严格。

另一方面,函数 表达式可以出现在任何表达式可以出现的任何地方。 (通常最好不要将它们放入循环中。)

您可以非常简单地区分函数声明和函数表达式:如果您立即使用构造的值,那么它就是一个表达式。

函数声明:

function foo() { /* ... */ }

函数表达式:

var f = function() { /* ... */ };
var nf = function foo() { /* ... */ }; // Avoid this on old versions of IE
doSomething(function() { /* ... */ });

重复使用相同的函数名称

您的代码正在尝试将 loadEvents 设置为 JSONP 回调。您不需要拥有 loadEvents 的多个副本,只需要一个 - 并且由于 JSONP 的工作方式,它必须是一个全局函数。

只需确保 loadEvents 中的逻辑能够在触发每个 JSONP 回调时处理多次调用。

覆盖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];
}

}
<小时/>

在下面回复您的评论:

But it still load only data from one "Label". I want with each style, it load a Label. Style1(normal text) load Label1(Tutorial), style2(bold text) load Label2(Widgets).

这是因为您的 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 .

关于javascript - For 循环中的函数问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19404189/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com