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

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

1 个答案: