使用HTML中的javascript插入/切换JSON元素/对象

时间:2018-03-24 00:34:14

标签: javascript html json

这是 - > My Code in JS Fiddle :)

我的问题是当我点击“Prev”按钮时。来自json文件的名称(例如) Angela (来自数据 - 人 - 知道 - 安吉拉)也可以使用另一个名字!

名称应显示在“Angie”和“Menu”之间,然后当我导航到其他页面时保存到本地存储,对我来说最好的方法是切换。

在我使用p5.js库的原始代码中,所以我认为它不适用于jquery。

data = {
"persons": [{
    "name": "Angie",
    "link": "Angie.html",
    "knows": [ "Angela", 
                "Mona"
             ]
},    
{
    "name": "Rana",
    "link": "Rana.html",
    "knows": ["Mona"]
},
{
    "name": "Tamara",
    "link": "Tamara.html",
    "knows": [ "Angela", 
               "Claudia"
             ]
}
]}

for (var key in data) { 
   for (var i = 0; i < data[key].length; i++) {
      var name = data[key][i].name;
      var link = data[key][i].link;
      var menu_bar = document.createElement('a');
      menu_bar.className = 'menu_bar';
      menu_bar.innerHTML =

    '<a class="Main-Path" href="'+ link +'">' + name + '</a>';

    document.getElementById('persons').appendChild(menu_bar);

  }

}
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;
}
<div class="scrollmenu" id="persons">

<a href="index.html"> Menu </a>

</div>

<button id="Button" style="float:left;"> Prev </button> 

我会非常感激,你会节省我的一天!

0 个答案:

没有答案