Question

我要在页面上显示localStorage中的收藏夹，我想向还没有任何收藏夹的人显示一条消息。这是div，用于显示列表，在没有收藏夹的情况下，我希望将其改用于显示以下消息：

<div id='favorites'></div>

这是 JavaScript ，通常显示收藏夹：

var options = Array.apply(0, new Array(localStorage.length)).map(function (o, i){
    return localStorage.key(i);
});

function makeUL() {
    var LIs = '';
    var noFavs = 'Hmm, you must\'ve not favorited anything yet. Maybe you\'ll like <a href="#random-page" onclick="runme()" class="squiggly--url">this one</a>.';
    var len = options.length;

    if (len === 0) {
        document.getElementById('nofavorites').innerHTML = noFavs; 
    } else {
        for (i = 0; i < len; i += 1) {
            LIs += '<li>' + options[i] + '</li>';
        }
        return '<ul>' + LIs + '</ul>';
    }
}

document.getElementById('favorites').innerHTML = makeUL();

现在，它仅显示undefined。

Answer 1

这是因为，makeUL数组中没有元素时，options函数不会返回任何值。

您将不得不选择：在函数中更新元素或者获取要插入到函数返回的HTML元素内的值。但是你不应该两者都做。

您可能想将代码更改为类似的内容？

var options = Array.apply(0, new Array(localStorage.length)).map(function (o, i) {
    return localStorage.key(i);
});

function makeUL() {
    var LIs = '';
    var noFavs = 'Hmm, you must\'ve not favorited anything yet. Maybe you\'ll like <a href="#random-page" onclick="runme()" class="squiggly--url">this one</a>.';
    var len = options.length;
    if (len === 0) {
        document.getElementById('favorites').innerHTML = noFavs; 
    } else {
        for (var i = 0; i < len; i += 1) {
            LIs += '<li>' + options[i] + '</li>';
        }
        document.getElementById('favorites').innerHTML = '<ul>' + LIs + '</ul>'; 
    }
}

makeUL();

此外，您正在定位示例中不存在的nofavorites元素。

Answer 2

这在您的html中：

<div id='favorites'></div>
<div id='nofavorites'></div>

您的JavaScript：

var options = Array.apply(0, new Array(localStorage.length)).map(function (o, i){
    return localStorage.key(i);
});

function loadFavoriteHTML() {
    var favoriteHtml = '';
    var noFavs = 'Hmm, you must\'ve not favorited anything yet. Maybe you\'ll like <a href="#random-page" onclick="runme()" class="squiggly--url">this one</a>.';
    var len = options.length;

    // Clear html lists
    document.getElementById('favorites').innerHTML = ''; 
    document.getElementById('nofavorites').innerHTML = ''; 

    if (len === 0) {
        document.getElementById('nofavorites').innerHTML = noFavs; 
    } else {
        for (var i = 0; i < len; i++) {
            favoriteHtml+= '<li>' + options[i] + '</li>';
        }
        var ulHtml= '<ul>' + favoriteHtml+ '</ul>';
        document.getElementById('favorites').innerHTML = ulHtml;
    }
}

loadFavoriteHTML();

您的代码显示为undefine，因为当您没有收藏夹列表时，您不会在makeUI函数中返回任何内容，并且默认情况下，如果您没有返回，则函数中的返回值是不确定的。 / p>

我更改了代码以在功能中设置UI，因为您编辑了2个不同的div。还有其他方法可以做到。这是一种方法。

如果数组为空则显示消息

2 个答案: