个人中心项目--朋友圈模块（二）

最新推荐文章于 2022-04-07 19:26:42 发布

勤勉的一只洋

最新推荐文章于 2022-04-07 19:26:42 发布

阅读量333

点赞数

分类专栏：个人中心项目

本文链接：https://blog.youkuaiyun.com/weixin_44438749/article/details/106823663

版权

个人中心项目专栏收录该内容

12 篇文章

订阅专栏

本文解决个人中心项目中朋友圈模块的点赞功能问题，通过引入两个Map集合优化点赞与取消点赞的状态管理，实现动态用户名的添加与移除，确保按钮状态一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.描述

这部分主要是解决个人中心项目–朋友圈模块（一）中遗留的问题，即：
在这里插入图片描述
修改的代码主要是前端的逻辑，在js部分新加了两个map集合，用于判断每条动态的点赞或是取消点赞的状态，主要思路是给每个按钮都维护一个状态变量timeNumun，而不是（一）中一组按钮维护一个timeNumun而出现状态混乱问题：
在这里插入图片描述

2.具体代码：

2.1 动态添加或取消点赞用户名：


<div class="collapse" th:id="collapseExample+${dynamics.dynamic.id}">
    <div class="card card-body">
        <div  th:each="likes:${dynamics.likes}"  >
            <div th:id="${likes.user.id}+likes+${dynamics.dynamic.id}" th:if="${likes.user} != null" style="word-wrap: break-word;font-family: 华文行楷;font-size: medium;float: left" th:text="${likes.user.username}" > </div>
        </div>
        <div th:id="${dynamics.dynamic.id}+likes" style="word-wrap: break-word;font-family: 华文行楷;font-size: medium;float: left"> </div>
    </div>

</div>

2.2 onclick函数：


 var timeNumun = 0;
    var likeMap = new Map();
    var unlikeMap = new Map();
    function unlike(id,toId,obj,size) {
        if (unlikeMap.has(toId)){

            timeNumun = unlikeMap.get(toId);
        }else {
            timeNumun = 0;
        }
        timeNumun = timeNumun + 1;
        unlikeMap.set(toId,timeNumun);

        var num = size;
        if (timeNumun % 2 == 0) {
            timeNumun = timeNumun + 1;
            var likesToken = id + 'likes' + toId;

            $.ajax({
                type: "GET",
                url: '/dynamic/like?id=' + id + '&toId=' + toId,//url
                success: function (data) {
                    var showText = document.getElementById(obj.id);
                    showText.innerHTML = num  + ' Love';
                    $('#' + obj.id).attr("class", "btn waves-effect btn-sm ml-1 waves-light btn-rounded btn-danger");
                    document.getElementById(likesToken).innerHTML = data;
                },
                error: function () {
                    alert("异常！");
                }

            });
            return false;
        } else if (timeNumun % 2 == 1) {
            timeNumun = timeNumun + 1;
            var likesToken = id + 'likes' + toId;
            $.ajax({
                type: "GET",
                url: '/dynamic/unlike?id=' + id + '&toId=' + toId,//url
                success: function (data) {
                    var showText = document.getElementById(obj.id);
                    showText.innerHTML = num - 1 + ' Love';
                    $('#' + obj.id).attr("class", "btn btn-outline-danger btn-sm ml-1 btn-rounded");
                    document.getElementById(likesToken).innerHTML = '';

                },
                error: function () {
                    alert("异常！");
                }

            });
            return false;
        }
    }
    var timeNum = 0;
    function like(id,toId,obj,size) {
        if (likeMap.has(toId)){

            timeNum = likeMap.get(toId);
        }else {
            timeNum = 0;
        }
        timeNum = timeNum + 1;
        likeMap.set(toId,timeNum);
        var num = size+1;
        var likesToken = toId+'likes';
        if (timeNum % 2 == 1){
            $.ajax({
                type:"GET",
                url:'/dynamic/like?id='+id+'&toId='+toId,//url
                success: function (data) {
                    var showText = document.getElementById(obj.id);
                    showText.innerHTML = num + ' Love';
                    $('#'+obj.id).attr("class","btn waves-effect btn-sm ml-1 waves-light btn-rounded btn-danger");
                    document.getElementById(likesToken).innerHTML = data;
                },
                error : function() {
                    alert("异常！");
                }

            });
            return false;
        }else if (timeNum % 2 == 0){

            $.ajax({
                type:"GET",
                url:'/dynamic/unlike?id='+id+'&toId='+toId,//url
                success: function (data) {
                    var showText = document.getElementById(obj.id);
                    showText.innerHTML = num - 1 + ' Love';
                    $('#'+obj.id).attr("class","btn btn-outline-danger btn-sm ml-1 btn-rounded");
                    document.getElementById(likesToken).innerHTML = '';

                },
                error : function() {
                    alert("异常！");
                }

            });
            return false;
        }
    }