JavaScript通过改变location对象的hash属性实现相同页面显示不同详情内容的效果

约定不等于承诺〃 2023-02-15 10:16 18阅读 0赞

## JavaScript通过改变location对象的hash属性的应用 ##

前面我们学到了BOM的Location对象，现在来讲一下实际的应用。通过改变hash属性获取不同的数据。

**1.列表页面代码：**

**2.详情页面代码：**  
HTML代码：

姓名：
 年龄：

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/**