0

フィードからデータをロードするコードがあります。ここで 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>

Forloopを使用して からデータをロードします2 Labels (Tutorials, Widgets)。

ラベルごとに、各スタイルを使用する必要があります( normal and boldjsfiddleの例のように)。しかし、なぜ からのみデータをロードするのかわかりませんLabel。

あなたの助けが必要です。すべての提案に感謝します。

4

1 に答える 1

6

ここにはいくつかの問題があります。

制御構造内の関数宣言

関数宣言(関数のためにそこにあるものlistEvents) は、制御構造内では無効です。それらは、ループ内や条件分岐内などではなく、グローバル スコープまたは関数スコープのトップレベルで出現する必要があります。一部のエンジンは、これらの構造内でそれらを許容し、意味を推測しますが、他のエンジンはより厳密です。

一方、関数式は、任意の式を使用できる場所ならどこにでも使用できます。(通常は、それらをループに入れないことが最善です。)

関数宣言と関数式の違いは非常に簡単にわかります。構文の値をすぐに使用している場合、それは式です。

関数宣言:

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

関数式:

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

同じ関数名の再利用

loadEventsコードはJSONP コールバックとして設定しようとしています。のコピーを複数持つ必要はありません。必要なのloadEventsは 1 つだけです。また、JSONP の動作方法により、これはグローバル関数である必要があります。

JSONP コールバックがトリガーされるたびに、ハンドル内のロジックがloadEvents複数回呼び出されるようにしてください。

上書きm

m関数で変数の値を上書きしています。あなたのやり方は無害ですが、それでも悪い考えです。

使用するdocument.write

document.write最新の Web ページや 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 つの「ラベル」からのみデータをロードします。各スタイルで、ラベルをロードします。Style1(通常のテキスト) load Label1(Tutorial), style2(ボールドテキスト) 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);
}

DOMを読んだり、おそらく良いライブラリを使ってこれを簡単にすることをお勧めします — jQuery、YUI、Closure、または他のいくつかのいずれかです。

于 2013-10-16T13:06:45.550 に答える