Javascript 来自数组的动态HTML导航栏
我将以下数组输出到等效的JavaScript JSON变量,并尝试创建一个基于动态的导航栏Javascript 来自数组的动态HTML导航栏,javascript,jquery,html,Javascript,Jquery,Html,我将以下数组输出到等效的JavaScript JSON变量,并尝试创建一个基于动态的导航栏 $navArray = array( array('id'=>1,'parent'=>0,'text'=>'1A','href'=>'1a'), array('id'=>2,'parent'=>1,'text'=>'2B','href'=>'2b'), array('id'=>3,'parent'=>1,'text'=&g
$navArray = array(
array('id'=>1,'parent'=>0,'text'=>'1A','href'=>'1a'),
array('id'=>2,'parent'=>1,'text'=>'2B','href'=>'2b'),
array('id'=>3,'parent'=>1,'text'=>'3C','href'=>'3c'),
array('id'=>4,'parent'=>2,'text'=>'4D','href'=>'4d'),
array('id'=>5,'parent'=>2,'text'=>'5E','href'=>'5e'),
array('id'=>6,'parent'=>5,'text'=>'6F','href'=>'6f'),
array('id'=>7,'parent'=>5,'text'=>'7G','href'=>'7g'),
array('id'=>8,'parent'=>3,'text'=>'8H','href'=>'8h'),
);
脚本(JavaScript/jQuery)应获取数组并基于父“id”返回HTML,如下所示:
<ul>
<li>
<a href="1a">1A</a>
<ul>
<li>
<a href="2b">2B</a>
<ul>
<li>
<a href="4d">4D</a>
</li>
<li>
<a href="/סוכרת">5E</a>
<ul>
<li>
<a href="6f">6F</a>
</li>
<li>
<a href="7g">7G</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="3c">3C</a>
<ul>
<li>
<a href="8h">8H</a>
</li>
</ul>
</li>
</ul>
</li>
<ul>
如何按照描述动态创建多维级别的HTML导航栏?听起来像是递归的经典案例,您可以更改数组对象以包含其自己的子对象吗
$navArray = array(
array('id'=>1,'text'=>'1A','href'=>'1a', 'children' => array(
array('id'=>2,'text'=>'2B','href'=>'2b', 'children' => array(
array('id'=>4,'text'=>'4D','href'=>'4d'),
array('id'=>5,'text'=>'5E','href'=>'5e', 'children' => array(
array('id'=>6,'text'=>'6F','href'=>'6f'),
array('id'=>7,'text'=>'7G','href'=>'7g'),
)),
)),
array('id'=>3,'text'=>'3C','href'=>'3c', 'children' => array(
array('id'=>8,'text'=>'8H','href'=>'8h')
)),
)),
);
然后,如果您将数组输出到JS(let arr=
),您可以将其输入到函数中,该函数将通过子函数递归运行,类似于此的操作应该会起作用:
function createMenuItems(arr) {
let output = '<ul>'
for (let item of arr) {
output += `<li><a id="${item.id}" href="${item.href}">${item.text}</a></li>`
if (item.children && item.children.length) {
output += createMenuItems(item.children);
}
}
output += '</ul>'
return output
}
函数createMenuItems(arr){
让输出=“”
用于(arr的let项目){
输出+=``
if(item.children&&item.children.length){
输出+=createMenuItems(item.children);
}
}
输出+='
'
返回输出
}
php在这个问题上做了什么?我的意思是你尝试的是错误的…我的意思是非常错误的。我的意思是,如果这个代码被设计成(以某种方式)煮一壶水,它实际上会产生一群鸭子,教它们跳罐头舞……真的错了。Tl;Dr删除您的“代码”阅读更多内容,然后重新开始
function createMenuItems(arr) {
let output = '<ul>'
for (let item of arr) {
output += `<li><a id="${item.id}" href="${item.href}">${item.text}</a></li>`
if (item.children && item.children.length) {
output += createMenuItems(item.children);
}
}
output += '</ul>'
return output
}