javascript - Accordion 从 localStorage 变量中设置为事件状态

标签 javascript jquery jquery-ui local-storage

我有一个 jQuery UI Accordion ,我需要记住它的状态(最后打开的是哪个 header )。

这是我的做法:

var storedActive = localStorage.getItem("storedActive");
if (isNaN(storedActive)){
    storedActive = false;
}
console.log(storedActive);
jQuery('#accordion').accordion({
    heightStyle: "content",
    collapsible: true,
    header: 'h4',
    active: storedActive,
    activate: function(event, ui){
        if(ui.newHeader.context){
            storedActive = ui.newHeader.context.id.slice(-1); //getting id of clicked header
        }else{
            storedActive = false;
        }
        localStorage.setItem("storedActive", storedActive);
    }
});

第 5 行中的 console.log(storedActive) 证明了上次单击的 header 的值已被正确记住并恢复。问题是 Accordion 没有打开任何标题。

奇怪的是,当我手动输入值 storedActive 时, Accordion 会按预期打开标题。只是从 localStorage 恢复值时出现一些问题。

最佳答案

从 localStorage 获取变量时我忘记使用 parseInt。现在一切正常。谢谢宁斯利!

var storedActive = parseInt(localStorage.getItem("storedActive"));
if (isNaN(storedActive)){
    storedActive = false;
}
console.log(storedActive);
jQuery('#accordion').accordion({
    heightStyle: "content",
    collapsible: true,
    header: 'h4',
    active: storedActive,
    activate: function(event, ui){
        if(ui.newHeader.context){
            storedActive = ui.newHeader.context.id.slice(-1); //getting id of clicked header
        }else{
            storedActive = false;
        }
        localStorage.setItem("storedActive", storedActive);
    }
});

关于javascript - Accordion 从 localStorage 变量中设置为事件状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26042783/

相关文章:

javascript - 在 Javascript for 循环中引用 i 值

css - Bootstrap Accordion 在集成到 CMS 中时恶意滑动

javascript - 尝试为 div 中的 para 编写一些 'Show/Hide More Text' 功能

javascript - VueJs - DOM 不更新数组突变

jquery - 选定的单选按钮显示带有 jQ​​uery 的文本输入

javascript - 使用 jquery 实时更新 css 属性

jquery - 如何制作拖放对接面板?

javascript - jquery ui draggable 自动改变宽度

javascript - 如何用其他文本替换正则表达式 {{someText}}?

javascript - 通过硬编码 csv 文件的值实现下载功能