<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul, ol, li {
list-style: none;
}
ul {
width: 100%;
height: 60px;
text-align: center;
overflow: hidden;
}
ul > li {
float: left;
line-height: 60px;
width: 200px;
cursor: pointer;
background-color: orange;
font-size: 30px;
}
div {
width: 100%;
height: 230px;
border-top: 1px solid #333;
border-bottom: 1px solid #333;
}
div > ol {
width: 1226px;
height: 100%;
margin: 0 auto;
overflow: hidden;
}
div > ol > li {
width: calc(100% / 6);
float: left;
height: 100%;
background-color: #fff;
}
</style>
</head>
<body>
<ul class="nav"></ul>
<div>
<ol class="goodsBox"></ol>
</div>
<script src="./data.js"></script>
<script>
/*
二级菜单渲染
分析数据结构
+ 类似于 data.js 的多维数组结构
代码实现:
1. 获取元素
=> .nav : 承载标题的
=> .goodsBox : 放二级菜单的商品盒子
2. 根据数组渲染标题
=> 循环遍历数组, 根据数组的成员创建 li 标签
=> 添加倒 ul 里面
3. 给每一个一级标题添加一个鼠标移入事件
=> 因为使用的是创建节点的方式
=> 创建的时候直接添加
方案2:
=> 单独获取所有的 li
=> 但是一定要在插入页面以后再获取
4. 根据移入的不同渲染不同的二级菜单
=> 移入哪一个 li ? this
=> 我移入的这个 li 对应的数据是谁 ?
-> 再渲染页面的时候, 把 id 当作一个自定义属性放在元素身上
=> 再移入事件里面, 获取倒当前移入这个元素的 data-id 属性
=> 去数组里面找到数据
5. 用我们找到的二级数据列表来渲染页面
=> 拼接字符串的方式渲染
*/
// 1. 获取元素
var nav = document.querySelector('.nav')
var goodsBox = document.querySelector('.goodsBox')
// 2. 根据数组渲染标题
// 准备一个文档碎片
var frg = document.createDocumentFragment()
dataList.forEach(function (item) {
// 创建 li
var li = document.createElement('li')
// 向 li 里面添加一些内容
li.innerHTML = item.name
// 4-1. 添加一个数据 id 再元素身上
li.dataset.id = item.id
// 把 li 放在筐里
frg.appendChild(li)
})
// 循环结束以后, 把 frg 的内容放在 ul 里面
nav.appendChild(frg)
// 3. 给每一个一级标题绑定一个鼠标移入事件
var lis = nav.querySelectorAll('li')
lis.forEach(function (item) {
item.onmouseover = function () {
// 4-2. 拿到元素身上记录的 data-id 属性
var id = this.dataset.id - 0
// 4-3. 去数组里面找东西
// console.log(dataList)
// 数组常用方法 filter
// var secondList = dataList.filter(function (item) { return item.id === id })[0]
// console.log(secondList)
// 数组常用方法 find
var secondList = dataList.find(function (item) { return item.id === id }).list
// console.log(secondList)
// 5. 拼接字符串的方式来渲染页面
var str = ''
secondList.forEach(function (item) {
str += `
<li>
<img src="${ item.list_url }" alt="">
<p>${ item.list_name }</p>
<p>￥${ item.list_price.toFixed(2) }</p>
</li>
`
})
// 插入倒 ol 里面
goodsBox.innerHTML = str
}
})
</script>
</body>
</html>
![JavaScript自学笔记【4】函数的声明与调用目录二、函数的声明 三、函数的调用[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)