用jquery实现简单的浏览历史功能

最新推荐文章于 2022-01-24 09:41:47 发布

otatoz

最新推荐文章于 2022-01-24 09:41:47 发布

阅读量916

点赞数 1

分类专栏：公司相关文章标签：浏览历史 jquery 数组

本文链接：https://blog.csdn.net/qq_42720683/article/details/88018371

版权

公司相关专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文没有涉及到后台数据库，仅是前台页面的显示

初入公司，写页面时要求做一个浏览历史的功能，但是只要求实现简单的页面显示。

大致效果如下图：

点击标题页的标题一二三，在浏览历史页显示点击过的文章标题

依次点击标题一二三，效果如下：依次点击三二一，效果如下：

代码如下：

<!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>

---------------本文完---------------

otatoz

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用jquery实现简单的浏览历史功能

本文没有涉及到后台数据库，仅是前台页面的显示初入公司，写页面时要求做一个浏览历史的功能，但是只要求实现简单的页面显示。大致效果如下图：点击标题页的标题一二三，在浏览历史页显示点击过的文章标题依次点击标题一二三，效果如下： ...
复制链接

扫一扫