javascript - jquery 在 <ul> 中显示项目列表

Question

您好，我想显示里面的项目列表

示例 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代码有问题。它不输出任何东西

Answer 1

你做错的地方太多了。

首先，它不是纯 javascript，而是 jquery。

您需要引用jQuery api能够使用 jQuery。

但是，您也可以通过纯 javascript 实现您想要的。

现在让我们看看你的错误

1. 您已经创建了一个函数 pageLoaded ，但没有在任何地方调用它。您需要调用一个函数才能使其逻辑正常工作。我假设你想调用你的 pageLoaded页面准备好时的方法。你可以在 body 负荷时调用它，也可以简单地在 jQuery 的 .ready 中调用它。即$(document).ready(function(){ pageLoaded()}); . 此方法只是确保您的逻辑在 dom 准备就绪时执行

2. 您在方法“数组中的项”中写入了非关键字、无意义的词。删除它以使您的功能正常工作。我假设您想在那儿发表评论，在脚本标签内发表这样的评论:

    //items in the array
   

3. 您没有将新值连接到您的 list变量，你将在每次迭代中覆盖它的内容，所以而不是 list ="<li>"+games[i]+"</li>";这个，做这个

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

4. 最后，您要附加 list至 #gamelist在for循环里面。在循环外做。一旦你的 list 完成。并删除行 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);

});

看这个fiddle