本文没有涉及到后台数据库,仅是前台页面的显示
初入公司,写页面时要求做一个浏览历史的功能,但是只要求实现简单的页面显示。
大致效果如下图:
点击标题页的标题一二三,在浏览历史页显示点击过的文章标题
依次点击标题一二三,效果如下: 依次点击三二一,效果如下:
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浏览历史</title>
<!-- 引入jquery -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="content">
<!-- 标题 -->
<div class="left">
<h1>标题页</h1>
<div class="title">标题一</div>
<div class="title">标题二</div>
<div class="title">标题三</div>
</div>
<!-- 浏览历史 -->
<div class="right">
<h1>浏览历史页</h1>
<table class="historyList">
</table>
</div>
</div>
</body>
</html>
<script>
$(function(){
// 创建数组
var arr = [];
// 事件代理,把本该在子元素上的事件绑定到父元素上,即点击父元素相当于点击子元素
$('.content').on({
click:function(event){
// event.target表示当前点击元素
// $(event.target).html()表示获取当前点击元素的内容
// 将点击获取到的文章标题放入数组
arr.push($(event.target).html());
// 遍历数组,并将标题加载到浏览历史框
arr.forEach(function(item){
var $tr = $(`
<tr>
<td>
<div class="readHistory">`+item+`</div>
</td>
</tr>
`);
$('.historyList').append($tr);
// 在加载完本次点击所获取的文章标题后,立即清空数组
// 如果不清空,在第二次点击时,会加载第一次的标题,即会重复获取之前点击所获得的文章标题
// 这一步很重要!!!!
arr = [];
});
}
},'.title');
})
</script>
<style>
.left{
width: 300px;
height: 300px;
background-color: #ccc;
}
.left .title{
cursor: pointer;
}
.right{
width: 300px;
height: 300px;
background-color: teal;
}
</style>