Question

我的目标是切换＆＃34; prev＆＃34;和＆＃34;分机＆＃34;我以这种方式从JSON文件中获取的元素：

菜单栏如下所示：

[＆＃34; prev_Person1＆＃34; ＆＃34; PERSON1＆＃34; ＆＃34; ext_Person1＆＃34; ......＆＃34; Person2＆＃34; ......＆＃34; Person3＆＃34; ......]

我首先将prev_Person1和ext_Person1设置为不可见。我正在尝试使用javascript代码末尾的jquery函数。

当我点击＆＃34; Go Back＆＃34; -Button the object＆＃34; prev_Person1＆＃34;应该显示，在这种情况下它是Jeanette的名字。

当我点击＆＃34;前进＆＃34; -Button对象＆＃34; ext_Person1＆＃34;应该显示，在这种情况下，它是安吉拉的名字。

该栏现在应该是

[Jeanette Angie Angela ...]

我想将更改保存到本地存储，以便当我导航到其他页面时，它不会返回到其第一个状态。

<div class="scrollmenu" id="myHeader">
    <a style="float:left" href="index.html">Menu</a>    
</div>
<button id="prev"> Go Back </button>
<button id="ext"> Go Forward </button>

CSS：

 body 
 {
   margin: 0;
   font-family: Arial;
 }
 .top-container 
 {
 background-color: #f1f1f1;
 padding: 2px;
 text-align: center;
 }
 div.scrollmenu {
 background-color: #0000A0;
 overflow: auto;
 white-space: nowrap;
 }

div.scrollmenu a {
display: inline-block;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
}

div.scrollmenu a:hover {
background-color: #777;
}

的Javascript

data = 
{
"persons": [{
    "id": "1",
    "name": "Angie",
    "link": "*",
    "prev": [ { "id" : "6",
                "name" : "Jeanette"}],
    "ext": [ { "id" : "4",
               "name" : "Angela"}]    
},    
{
    "id": "2",
    "name": "Rana",
    "link": "Rana.html",
    "prev": [ { "id" : "7",
                 "name" :"Angelika"}],
    "ext": [ { "id" : "5",
                 "name" :"Mona"}]    
},
{
    "id": "3",
    "name": "Tamara",
    "link": "Tamara.html",
    "prev": [ { "id" : "4",
                 "name" : "Angela"}],
    "ext": [ { "id" : "8",
                 "name" :"Tala"}]             
}
]}

var id;
var name;
var link;
var prev;
var ext;

for (var key in data) {
for (var i = 0; i < data[key].length; i++) {
    id_persons = data[key][i].id;
    name = data[key][i].name;
    ext = data[key][i].ext;
    prev = data[key][i].prev;
    link = data[key][i].link;

// just like add the add all the actors     
for (var j = 0; j < ext.length; j++) {
    var ext_person = ext[j].name;
    var id_ext = ext[j].id;

    }
for (var p = 0; p < prev.length; p++) {
    var prev_person = prev[p].name;
    var id_prev = prev[p].id;
}
    // ---------------------------------------------------------------------
    // menu_bar_knows is for the prev elements //
    var menu_bar_prev = document.createElement('a');
    menu_bar_prev.id = id_prev;

    menu_bar_prev.innerHTML =
    prev_person + '</a>';
    // End of menu_bar_knows elements // 
    // ---------------------------------------------------------------------

    // ---------------------------------------------------------------------
    // menu_bar is for the main path elements //
    var menu_bar = document.createElement('a');
    menu_bar.className = 'menu_bar';
    menu_bar.id = id_persons;
    menu_bar.href = link;

    menu_bar.innerHTML =
    name + '</a>';
    // End of menu_bar elements // 
    // ---------------------------------------------------------------------
    // ---------------------------------------------------------------------
    // menu_bar_knows is for the ext elements //
    var menu_bar_ext = document.createElement('a');
    menu_bar_ext.id = id_ext;

    menu_bar_ext.innerHTML =
    ext_person + '</a>';
    // End of menu_bar_knows elements // 
    // ---------------------------------------------------------------------
    // ---------------------------------------------------------------------
    // Calling the elements in the header
    document.getElementById('myHeader').appendChild(menu_bar_prev);
    document.getElementById('myHeader').appendChild(menu_bar);
    document.getElementById('myHeader').appendChild(menu_bar_ext);
    // End 
    // ---------------------------------------------------------------------   
 }
}
//-------------------------------------------//

$(document).ready(function(){

    $(function(angie) {
        var isVisible;
        $("#4, #6").toggle(false);

        if (localStorage.getItem('prev_angie_visible') != null) {
            isVisible = localStorage.getItem('prev_angie_visible') === 
            'false' ? false : true;
        $("#6").toggle(isVisible);
        }

        if (localStorage.getItem('ext_angie_visible') != null) {
            isVisible = localStorage.getItem('ext_angie_visible') === 
            'false' ? false : true;
        $("#4").toggle(isVisible);
        }

    $("#prev_angie").click(function(){
        $("#6").toggle();
        localStorage.setItem('prev_angie_visible', $("#6").is(":visible"));
    });

    $("#ext_angie").click(function(){
        $("#4").toggle();
        localStorage.setItem('ext_angie_visible', $("#4").is(":visible"));
    });
  });
 })

我会非常感谢每一个提示或解决方案!!

Answer 1

您应该在Javascript中调用元素并设置隐藏所需的元素，然后单击您切换所需的元素，然后保存到本地存储：）

通过HTML中的javascript切换JSON元素

1 个答案: