函数在 For 循环问题中

Function in For Loop problems

本文关键字：问题 循环 For 函数      更新时间：2023-09-26

我有代码从提要加载数据。你可以在这里检查jsfiddle。

<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)加载数据。

对于每个标签，我希望它使用每种样式（normal and bold 作为 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];
    }
}

在下面重新发表您的评论：

但它仍然只加载来自一个"标签"的数据。我想要每种样式，它都会加载一个标签。样式 1（普通文本）加载标签 1（教程），样式 2（粗体文本）加载标签 2（小部件）。

这是因为您的加载事件会覆盖议程元素的内容。与其在标记中包含议程元素，不如将它们动态添加到某个容器中。例如：

<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);
}

我建议在DOM上做一些阅读，并且可能使用一个好的库来使这些东西更容易 - jQuery，YUI，Closure或其他任何几个。

相关文章：