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

Question

不确定为什么这不起作用，需要一些帮助。如果您单击“时事通讯”、“新闻”或“公告”，我会尝试将布局更改为显示正确的 View 并存储在本地存储中。

现在，当您单击上述 3 个元素之一时，没有任何反应 - 它不会更改布局 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

Answer 1

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

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

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

如你所见here , 每个元素只能有一个 id :

In XML, fragment identifiers are of type ID, and there can only be a single attribute of type ID per element. Therefore, in XHTML 1.0 the id attribute is defined to be of type ID. In order to ensure that XHTML 1.0 documents are well-structured XML documents, XHTML 1.0 documents MUST use the id attribute when defining fragment identifiers on the elements listed above. See the HTML Compatibility Guidelines for information on ensuring such anchors are backward compatible when serving XHTML documents as media type text/html.

操作 html 选项卡的通常方法是通过向隐藏元素添加类(但如果它更适合您，您也可以在可见元素上添加类)，然后通过类而不是通过 id 获取您的元素