HTML+Jquery 点赞功能实现

要在门户中实现一个点赞功能，主要思路为点击点赞图标后切换高亮状态，点击后调用后台接口，再回显点赞数量。

1、准备点赞和未点赞状态的图标

2、html代码

<div>
   <span class="font-14 author_span ml-5 mt-10 praiseCount" style="float: right;line-height: 20px;">0</span>
   <span class="praise d-inline-block mt-10"></span>
</div>

3、css

.font-14 {
  font-size: 14px;
  line-height: 22px;
}
.author_span {
    vertical-align: middle;
}
.ml-5 {
  margin-left: 5px !important;
}
.mt-10 {
  margin-top: 10px !important;
}
.praise {
    width: 18px;
    height: 18px;
    cursor: pointer;
    float: right;
    background-image: url("/static/content/images/thumbs.svg");
}
.praise.active {
    background-image: url("/static/content/images/thumbsActive.svg");
}
.d-inline-block {
  display: inline-block !important;
}

4、jquery

// 引入jQuery（本地的或者cdn引入）
<script src="/static/content/js/lib/jquery-3.7.1.min.js" type="text/javascript"></script>

<script>
$(document).ready(function () {
        $('.praise').click(function() {
            // solutionId为父元素中绑定的id，用于后续点赞后调接口
            var solutionId = $(this).closest('.solutionIdClass').attr('id');
            var isPraise = $(this).hasClass('active')
            if (isPraise) {
                $(this).removeClass('active');
            } else {
                $(this).addClass('active')
            }
            
            // 调用点赞接口方法
            submitPraise(!isPraise, solutionId)
        })
})

function submitPraise(isPraise, solutionId) {
        const params = {
            solutionId,
            praise: isPraise
        }
        // 使用 AJAX 提交评分到后台接口
        $.ajax({
            url: '/api/....', // 替换为您的后台接口地址
            method: 'POST',
            data: JSON.stringify(params), 
            headers: {
                "Authorization": "Bearer " + localStorage.getItem('inmsToken') // 这里填入你的认证信息，例如 "Bearer {token}"
            },
            contentType: "application/json",
            success: function(response) {
                // 可以在这里处理成功的回调逻辑，例如更新页面状态
               $('.praseCount').text('1')
            },
            error: function(xhr, status, error) {
                console.error('点赞出现错误.', error);
            }
        });
    }
</script>