收藏功能前端实现代码

最新推荐文章于 2024-07-09 15:32:54 发布

小胖丨学编程

最新推荐文章于 2024-07-09 15:32:54 发布

阅读量8.8k

点赞数 9

分类专栏：前端功能实现文章标签： jQuery Bootstrap SSM ajax

本文链接：https://blog.csdn.net/qq_35764460/article/details/94055321

版权

前端功能实现专栏收录该内容

1 篇文章 1 订阅

订阅专栏

基于jQuery+Bootstrap+ajax+SSM 收藏功能前端实现

收藏功能需求

收藏功能需求

收藏功能需求：用户点击收藏按钮，前端通过一个五角星的方式，实现代码。
当用户未收藏时，显示空心的五角星；
当用户收藏时，显示实心的五角星；
在这里插入图片描述

Bootstrap

https://v3.bootcss.com/components/
Bootstrap 提供了很多的组件图标，其中就包含的空心的五角星和实心的五角心。
在这里插入图片描述

当span的class 的名字定义为glyphicon glyphicon-star，前端显示实心五角心；
当span的class 的名字定义为glyphicon glyphicon-star-empty，前端显示空心五角心；

下面直接贴下代码吧

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>收藏功能</title>
<%
	pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<script src="${APP_PATH }/static/js/jquery-3.3.1.min.js"></script>
<link href="${APP_PATH }/static/bootstrap-3.3.7/css/bootstrap.min.css"
	rel="stylesheet">
<script src="${APP_PATH }/static/bootstrap-3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container">
		<button type="button" class="btn btn-default" id="btn_collect">
			<span class="glyphicon glyphicon-star-empty" id="btn_collect_icon" aria-hidden="true"></span>收藏
		</button>
	</div>
</body>
<script type="text/javascript">
$("#btn_collect").click(function(){
	var classname = $("#btn_collect_icon").attr("class");
	$("#btn_collect_icon").removeClass("glyphicon-star-empty glyphicon-star");
	if(classname == "glyphicon glyphicon-star-empty" ){
		$("#btn_collect_icon").addClass("glyphicon glyphicon-star");
		alert("收藏成功");
	}else{
		$("#btn_collect_icon").addClass("glyphicon glyphicon-star-empty");
		alert("取消收藏");
	}
});
</script>
</html>

代码解释

<script src="${APP_PATH }/static/js/jquery-3.3.1.min.js"></script>
<link href="${APP_PATH }/static/bootstrap-3.3.7/css/bootstrap.min.css"
	rel="stylesheet">
<script src="${APP_PATH }/static/bootstrap-3.3.7/js/bootstrap.min.js"></script>

这三行非常重要，主要功能就是引入jQuery+Bootstrap的包，这个最好使用本地的，并且顺序不能乱了

<body>
	<div class="container">
		<button type="button" class="btn btn-default" id="btn_collect">
			<span class="glyphicon glyphicon-star-empty" id="btn_collect_icon" aria-hidden="true"></span>收藏
		</button>
	</div>
</body>

上面就比较简单了，就是在页面中，有一个按钮。默认是空心glyphicon-star-empty"，当然后期写后端代码的时候需要提前的判断才行的。

<script type="text/javascript">
$("#btn_collect").click(function(){
	var classname = $("#btn_collect_icon").attr("class");
	$("#btn_collect_icon").removeClass("glyphicon-star-empty glyphicon-star");
	if(classname == "glyphicon glyphicon-star-empty" ){
		$("#btn_collect_icon").addClass("glyphicon glyphicon-star");
		alert("收藏成功");
	}else{
		$("#btn_collect_icon").addClass("glyphicon glyphicon-star-empty");
		alert("取消收藏");
	}
});
</script>

上面就是前段点击事件的主要逻辑

$("#btn_collect").click(function()

当点击按钮时触发。

var classname = $("#btn_collect_icon").attr("class");

通过span的id，获取到class的名字

if(classname == "glyphicon glyphicon-star-empty" ){
		$("#btn_collect_icon").addClass("glyphicon glyphicon-star");
		alert("收藏成功");
	}else{
		$("#btn_collect_icon").addClass("glyphicon glyphicon-star-empty");
		alert("取消收藏");
	}

如果是空心的则设置为实心
如果是实心的则设置为空心

上面我有一行代码没有讲解，就是 $("#btn_collect_icon").removeClass(“glyphicon-star-empty glyphicon-star”);

这个的意思是，移出掉 btn_collect_icon 的类名上，有的 glyphicon-star-empty 或者是 glyphicon-star。因为后面的语法是 $("#btn_collect_icon").addClass(“glyphicon glyphicon-star-empty”);就是添加类名，是在原来的基础上添加的。

github地址：https://github.com/zou1906524696/collect