Javascript函数将数组中的项目显示为垂直列表？

Question

我正在开发一个小网站，允许用户根据特定数量的成就来获得成就。我正在寻找一种干净的方法来从数组在屏幕上打印获得的成就。

基本上，我想要一个可以根据用户交互进行更新的数组的垂直列表显示。

目前我有这个:

function win() {
check = Number(localStorage.snum);

switch(check) {

    case 50:
    prizes.unshift('50: You infant');
    localStorage.priz = prizes;
    document.getElementById('awards').innerHTML = prizes;
    break;

    case 100:
    prizes.unshift('100: big whoop');
    localStorage.priz = prizes;
    document.getElementById('awards').innerHTML = prizes;
    break; 
}
}

在我的html中

<div id="numbox"> </div>
<div id="awards"></div>

除其他外。

我希望有一个“成就框”，将数组显示为垂直列表。

帮忙？

编辑:我拿出了<br />我在那里有一个 hackjob 垂直列表。

我猜数组看起来像 var prizes= new Array('50: You infant', '100: big whoop');

Answer 1

首先:

var awards = {
    50: 'You infant',
    100: 'big whoop'
};

function win() {
    var points = +localStorage.snum; // shortcut to convert to a number
    if(points in awards) {
        var prize = awards[points];
        prizes.unshift(prize);
        localStorage.priz = prizes; // not sure if you really need this

        var list = document.getElementById('awards');
        var li = document.createElement('li');
        li.innerHTML = points + ': ' + prize;
        list.insertBefore(li, list.firstChild); // inserting at the beginning
    }
}

使用此 HTML:

<ul id="awards"></ul>

使用这种映射可以更轻松地在以后扩展它(我认为您不想编写一千个 case 语句;))。

您可以使用 CSS 设置列表的样式。

更新: DEMO , another DEMO