javascript - localstorage不会切换 View 并且不会在控制台中产生任何错误

不知道为什么这不起作用，可以使用一些帮助。如果您单击“新闻稿”，“新闻”或“公共公告”，则布局会更改为显示正确的视图并存储在本地存储中。

现在，当您单击上述三个项目之一时，什么也没有发生-它不会更改布局视图，也不会在本地存储中存储数据...

任何帮助是极大的赞赏。

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

最佳答案

问题在于您试图获取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获取元素

关于javascript - localstorage不会切换 View 并且不会在控制台中产生任何错误，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42859390/