收藏功能需求
收藏功能需求：用户点击收藏按钮，前端通过一个五角星的方式，实现代码。
当用户未收藏时，显示空心的五角星；
当用户收藏时，显示实心的五角星；
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”);就是添加类名，是在原来的基础上添加的。
