在For循环问题中的功能

Question

我有代码从feed加载数据.你可以在这里查看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).

对于每个Label,我希望它使用每种样式(normal and bold例如在jsfiddle中).但我不知道为什么它只加载数据Label.

我需要你的帮助.谢谢你的所有建议.

Answer 1

这里有几个问题.

控制结构中的函数声明

函数声明(你的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];
    }

}

你的评论如下:

但它仍然只加载来自一个"标签"的数据.我想要每种风格,它加载一个标签.Style1(普通文本)加载Label1(教程),style2(粗体文本)加载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);
}

我建议对DOM进行一些阅读,并且可能使用一个好的库来使这些东西变得更容易 - jQuery,YUI,Closure或其他几个.