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 api才能使用 jQuery。

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

现在让我们看看你的错误

  1. 您已经创建了一个函数pageLoaded，但没有在任何地方调用它。您需要调用一个函数才能使其逻辑正常工作。我假设你想pageLoaded在页面准备好时调用你的方法。您可以在身体负载时调用它，也可以简单地在 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. 最后，您将 to 附加list到#gamelistfor 循环内。在循环外执行。一旦你的清单完成。并删除该行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 回答