JS小应用 - 万金流

JS访问列表内容

思路：

1.获取对象数组以后，以超链接显示。对应id放在链接方法的参数里。

2.点击链接以后，先把id存在session里，再跳转到显示内容页面。

3.在显示内容页面，读取id，之后就简单了。请求资源，显示内容。

列表页面，index.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/j1.js"></script>
    </head>
    <body onload="showList()">
        
    </body>
</html>

内容页面，detail.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/j1.js"></script>
    </head>
    <body onload="showDetail2()">
    </body>
</html>

j1.js：

 1 function showList() {
 2     a = [{
 3         title: "标题1",
 4         id: 1
 5     }, {
 6         title: "标题2",
 7         id: 2
 8     }];
 9     let b = document.querySelector("body");
10     for (x in a) {
11         t1 = document.createElement("div");
12         t2 = document.createElement("a");
13         t2.href = "javascript:showDetail1("+a[x].id+")";
14         t2.textContent =a[x].title;
15         t1.appendChild(t2);
16         b.append(t1);
17     }
18 }
19 
20 function showDetail1(myid) {
21     a=sessionStorage.setItem("showid",myid);
22     location.href="detail.html";
23 }
24 function showDetail2() {
25     a=sessionStorage.getItem("showid");
26     console.log(a);
27 }

运行结果：

点击对应内容：

（都不难，后续慢慢补充）

posted on 2023-10-16 13:00 万金流阅读(184) 评论(0) 编辑收藏举报