localstorage 不切换视图并且在控制台中不产生错误答案

【问题标题】：localstorage not switching view and producing no errors in consolelocalstorage 不切换视图并且在控制台中不产生错误
【发布时间】：2017-03-17 22:33:45
【问题描述】：

不知道为什么这不起作用，可以使用一些帮助。我试图让它在你点击“通讯”、“新闻”或“公共公告”时，布局会改变以显示正确的视图并存储在本地存储中。

现在，当您单击上述 3 项中的一项时，没有任何反应 - 它不会更改布局视图，也不会将数据存储在本地存储中...

非常感谢任何帮助。

JS：

$(document).ready(function(){
    // Changing layout to 'newsletters'
    $('.news_nav-for_nckcn ul li:nth-of-type(1)').on('click', function () {
        changeToNewslettersView();
    });

    // Changing layout to 'news'
    $('.news_nav-for_nckcn ul li:nth-of-type(2)').on('click', function () {
        changeToNewsView();
    });

    $('.news_nav-for_nckcn ul li:nth-of-type(3)').on('click', function () {
        changeToPublicAnnouncementsView();
    });

    if (typeof(Storage) !== "undefined") {
        var view = localStorage.getItem("view");
        if (view && view == "newsletters") {
            changeToNewslettersView();
        } else if (view && view == "news") {
            changeToNewsView();
        } else if (view && view == "publicAnnouncements") {
            changeToPublicAnnouncementsView();
        } else {
            // view isn't set, or is set to something we don't recognize
        }
    } else {
        // user's browser doesn't support localStorage
    }        
});
// Changing layout 'news' & 'publicAnnouncements' to 'newsletters'
function changeToNewslettersView() {
    var news=document.getElementById('hideClass');
    news.style.display="none";

    var publicAnnouncements=document.getElementById('hideClass');
    publicAnnouncements.style.display="none";

    var newsletters=document.getElementById('showClass');
    newsletters.style.display="block";

    storagePut("newsletters");

    $('.news_nav-for_nckcn ul li:nth-of-type(1)').addClass('active');
    $('.news_nav-for_nckcn ul li:nth-of-type(2)').removeClass('active');
    $('.news_nav-for_nckcn ul li:nth-of-type(3)').removeClass('active');
}
// Changing layout 'newsletters' & 'publicAnnouncements' to 'news'
function changeToNewsView() {
    var newsletters=document.getElementById('hideClass');
    newsletters.style.display="none";

    var publicAnnouncements=document.getElementById('hideClass');
    publicAnnouncements.style.display="none";

    var news=document.getElementById('showClass');
    news.style.display="block";

    storagePut("news");

    $('.news_nav-for_nckcn ul li:nth-of-type(2)').addClass('active');
    $('.news_nav-for_nckcn ul li:nth-of-type(1)').removeClass('active');
    $('.news_nav-for_nckcn ul li:nth-of-type(3)').removeClass('active');
}
// Changing layout 'newsletters' & 'news' to 'publicAnnouncements'
function changeToPublicAnnouncementsView() {
    var newsletters=document.getElementById('hideClass');
    newsletters.style.display="none";

    var news=document.getElementById('hideClass');
    news.style.display="none";

    var publicAnnouncements=document.getElementById('showClass');
    publicAnnouncements.style.display="block";

    storagePut("publicAnnouncements");

    $('.news_nav-for_nckcn ul li:nth-of-type(3)').addClass('active');
    $('.news_nav-for_nckcn ul li:nth-of-type(1)').removeClass('active');
    $('.news_nav-for_nckcn ul li:nth-of-type(2)').removeClass('active');
}
function storagePut(view) {
    if (typeof(Storage) !== "undefined") {
        localStorage.setItem("view", view);
    } else {
        // user's browser doesn't support localStorage
    }        
}

DEMO

【问题讨论】：

控制台错误：“TypeError：新闻为空”。没有 ID 为“hideClass”的元素。
Html 元素不能有多个 id。您必须在隐藏内容上使用一些“隐藏”类

标签： javascript jquery css html local-storage

【解决方案1】：

问题在于您试图获取 id 为“hideClass”的元素

从您的演示中，我们可以看到：

    <div id="2017-newsletters hideClass" class="nckcn_news_container-wrapper_newsletters">

你可以看到here，每个元素只能有一个id：

在 XML 中，片段标识符属于 ID 类型，每个元素只能有一个 ID 类型的属性。因此，在 XHTML 1.0 中，id 属性被定义为 ID 类型。为了确保 XHTML 1.0 文档是结构良好的 XML 文档，XHTML 1.0 文档在为上面列出的元素定义片段标识符时必须使用 id 属性。有关在将 XHTML 文档作为媒体类型 text/html 提供时确保此类锚点向后兼容的信息，请参阅 HTML 兼容性指南。

处理 html 选项卡的常用方法是向隐藏元素添加类（但如果更适合您，您也可以在可见元素上添加类），然后按类而不是 id 获取元素

【讨论】：

谢谢Logar！这似乎奏效了！我不敢相信我错过了......

【解决方案2】：

实际上news 和相应的变量被评估为null，因此news.style 给出了空错误并终止了脚本执行。我试图修复演示。它现在正在更改选项卡以及设置 localStorage。

See JsFiddle Demo

【讨论】：