JavaScript通过改变location对象的hash属性的应用
前面我们学到了BOM的Location对象,现在来讲一下实际的应用。通过改变hash属性获取不同的数据。
1.列表页面代码:
<a href="10模拟详情页面.html#0" target="_blank">张三</a>
<a href="10模拟详情页面.html#1" target="_blank">李四</a>
<a href="10模拟详情页面.html#2" target="_blank">王五</a>
<a href="10模拟详情页面.html#3" target="_blank">赵六</a>
<a href="10模拟详情页面.html#4" target="_blank">卓七</a>
2.详情页面代码:
HTML代码:
<p>姓名:<span id="name"></span></p>
<p>年龄:<span id="age"></span></p>
CSS代码:
span {
font-weight: 900;
font-size: 20px;
}
javascript代码:
// 模拟后台的数据
var data = {
"persons": [{
"name": "张三",
"age": 13
}, {
"name": "李四",
"age": 14
}, {
"name": "王五",
"age": 15
}, {
"name": "赵六",
"age": 16
}, {
"name": "卓七",
"age": 17
}]
}
// 获取后台的数据
var detialData = data.persons;
var msg = Number(location.hash.slice(1));
console.log(msg);
// switch (msg) {
// case 0:
// console.log(detialData[0])
// break;
// case 1:
// console.log(detialData[1])
// break;
// case 2:
// console.log(detialData[2])
// break;
// case 3:
// console.log(detialData[3])
// break;
// case 4:
// console.log(detialData[4])
// break;
// default:
// break;
// }
var oName = document.getElementById("name");
var oAge = document.getElementById('age');
// 逻辑代码
for (var i = 0; i < detialData.length; i++) {
if (i == msg) {
// console.log(detialData[i]);
oName.innerText = detialData[i].name;
oAge.innerText = detialData[i].age;
}
}
// for(var i=0;i<detialData.length;i++){
// console.log(detialData[i]);
// }
视频讲解链接:
https://www.bilibili.com/video/BV1Vt4y1y7uq/