1

我正在使用dexie.js，它是一个 indexDB 包装器。Anywhoo，我有一个从用户本地存储调用的数组，我的函数应该遍历数据库中的每个列表项并显示它。但是，单击我Butane时，它仅显示最近输入的名称。

注意：您可以通过添加一些值并检查本地存储来查看整个数据库。

我的 JsFiddle： https ://jsfiddle.net/enzp3zws/1/

我的html：

<ul id="mane"></ul>

我的js：

var db = new Dexie("TestDatabase");
db.version(1).stores({
    friends: '++id, name, age'
});
var collection = db.friends;
var placement = document.getElementById('rainman');
var jacement = document.getElementById('rainboy');
var stacement = document.getElementById('mane');
var listed = document.createElement('li');

function addrain(){
    collection.each(function(friend){
    var element = [friend.name];
    for (var i = 0; i < element.length; i++){ 
    listed.textContent = element[i];
    document.getElementById('mane').appendChild(listed);
    //alert(element); <-- this call alerts all names in database.  
    }   
});
}

请原谅其中一些变量名称的随机性。我已经不知道什么是睡眠了。

4

1 回答 1

1

每次都需要创建一个新的 'li' 元素：

//Remove var listed = ... line in header, then:
function addrain(){
    collection.each(function(friend){
        var element = [friend.name];
        for (var i = 0; i < element.length; i++){ 
            var listed = document.createElement('li');
            listed.textContent = element[i];
            document.getElementById('mane').appendChild(listed);
        }
        //alert(element); <-- this call alerts all names in database.  
    });
}

您的代码之前不起作用的原因是您只创建了一个li元素，并反复更改其文本并将其重新插入到不同的位置。

于 2016-10-26T21:02:03.327 回答