2

こんにちは、アイテムのリストを表示したい

サンプル HTML コード

<h3 id="game-filter" class="gamesection">
           <span>Game</span></h3>
        <div id="game-filter-div" style="padding: 0;">
            <ul id="gamelist">
            </ul>
        </div>

コード

var games = new Array();
    games[0] = "World of Warcraft";
    games[1] = "Lord of the Rings Online";
    games[2] = "Aion";
    games[3] = "Eve Online";
    games[4] = "Final Fantasy XI";
    games[5] = "City of Heros";
    games[6] = "Champions Online";
    games[7] = "Dark Age of Camelot";
    games[8] = "Warhammer Online";
    games[9] = "Age of Conan";
    function pageLoaded(){
        var list = "";

            for(i=0; i<games.length; i++){
        list ="<li>"+games[i]+"</li>";
        $("#gamelist").append(list);
        //document.getElementById("gamelist").innerHTML=list;
        list = "";
        }

}

私のjsコードに問題があるようです。何も出力しません

4

3 に答える 3

9

その中であなたが間違っていることはたくさんあります。

まず、純粋な JavaScript ではなく、その jquery です。

jQueryを使用できるようにするには、jQuery APIを参照する必要があります。

ただし、純粋な JavaScript でも目的を達成できます。

では、あなたの間違いを見てみましょう

  1. 関数を作成しましたpageLoadedが、どこにも呼び出していません。ロジックを機能させるには、関数を呼び出す必要があります。pageLoadedページの準備ができたらメソッドを呼び出したいと仮定しています。ボディロードで呼び出すか、単に jQuery の.ready ie 内で呼び出すことができます$(document).ready(function(){ pageLoaded()});。このメソッドは、dom の準備ができたときにロジックが実行されることを保証します。

  2. メソッド「配列内のアイテム」内に、キーワード以外の意味のない単語を書きました。関数を機能させるために削除してください。そこにコメントを入れたいと仮定して、スクリプトタグ内に次のようなコメントを入れます:

     //items in the array

  3. 変数に新しい値を連結しているのではlistなく、反復ごとにその内容を上書きしているので、これの代わりにlist ="<li>"+games[i]+"</li>";これを行います

     list +="<li>"+games[i]+"</li>";

  4. 最後に、 for ループ内にlisttoを追加しています。#gamelistループの外でそれを行います。リストが完成したら。行を削除して、list=" " この行 $("#gamelist").append(list);を for ループの外側に配置します。

次のように関数を試してください：

var games = new Array();
    games[0] = "World of Warcraft";
    games[1] = "Lord of the Rings Online";
    games[2] = "Aion";
    games[3] = "Eve Online";
    games[4] = "Final Fantasy XI";
    games[5] = "City of Heros";
    games[6] = "Champions Online";
    games[7] = "Dark Age of Camelot";
    games[8] = "Warhammer Online";
    games[9] = "Age of Conan";
$(document).ready(function(){
        var list = "";
        for(i=0; i<games.length; i++){
        list +="<li>"+games[i]+"</li>";
        }
    $("#gamelist").append(list);

});

このフィドルを参照してください

于 2013-04-19T20:20:04.383 に答える
4

jsfiddleについて

<h3 id="game-filter" class="gamesection"><span>Game</span></h3>

<div id="game-filter-div" style="padding: 0;">
    <ul id="gamelist"></ul>
</div>

var games = ["World of Warcraft", "Lord of the Rings Online", "Aion", "Eve Online", "Final Fantasy XI", "City of Heros", "Champions Online", "Dark Age of Camelot", "Warhammer Online", "Age of Conan"];

var gamelist = document.getElementById("gamelist");

games.forEach(function (game) {
    var li = document.createElement("li");

    li.textContent = game;
    gamelist.appendChild(li);
});

これは純粋な Javascript ですが、タグを jQuery に変更したようですが、ここに残しておきます。

さらに、上記のように初期化された配列を作成したくない場合は、new Array()悪い習慣と見なされるため、このようにすることもできます。

var games = new Array();

games.push("World of Warcraft");
games.push("Lord of the Rings Online");
games.push("Aion");
games.push("Eve Online");
games.push("Final Fantasy XI");
games.push("City of Heros");
games.push("Champions Online");
games.push("Dark Age of Camelot");
games.push("Warhammer Online");
games.push("Age of Conan");
于 2013-04-19T20:24:01.290 に答える
0

リストビューに要素を動的に追加した後、リストビューを更新する必要があります。そうしないと、更新されません。

 $("#gamelist").append(list).listview("refresh");
于 2013-04-19T20:23:20.373 に答える