收藏功能需求

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

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

收藏功能前端实现代码相关推荐

php微信小程序如何无限点赞,小程序中点赞和收藏功能的实现代码
小程序中的点赞功能和收藏功能是必不可少的,那么该如何实现点赞和收藏两个功能呢?本篇文章将给大家分享小程序中的点赞功能和收藏功能的代码实现. 收藏功能:focusFavoriteTab: functio ...
黑马旅游网编写练习(9)--旅游线路收藏功能
黑马旅游网编写练习(9)–旅游线路收藏功能旅游线路收藏功能分析在旅游详情页面,用户点击收藏按钮后,我们向服务器发送Ajax请求:然后查询用户是否登录:若用户已登录,则需要查询数据库表格判断该用户是 ...
微信 php收藏功能实现,关于微信小程序收藏功能的实现
这篇文章主要介绍了微信小程序收藏功能的实现代码,基本功能是点击收藏后显示已收藏,在另一个页面出现目前点击收藏的项目.需要的朋友可以参考下需求点击收藏后显示已收藏,在另一个页面出现目前点击收藏的项目 ...
android收藏功能demo,Android使用Realm数据库实现App中的收藏功能(代码详解)
前言 App数据持久化功能是每个App必不可少的功能,而Android最常用的数据持久化方式主要有以下的五种方式: 使用SharedPreferences存储数据: 文件存储数据: SQLite数据 ...
前端js代码实现截图功能
前端js代码实现截图功能据我所知,屏幕截图大致可以分为两种类型. 一种是真-屏幕截图,也就是我们平常QQ,微信,钉钉等社交工具里面所用到的截图.也就是说它能把我们看到的东西截取下来,所见即所得. 另 ...
网站实现点击 “加入收藏 ”功能 - 代码篇
网站实现点击 "加入收藏 "功能,如何实现? 案例 · 截图示下: 用户场景:网站实现点击 "加入收藏 "功能. 思路方法: 通过click键盘点击事件,完成组 ...
黑马旅游网——旅游路线详情展示和旅游路线收藏功能（完结）
旅游路线详情展示效果: 将该旅游路线的价格.商家.风景图等等详细信息展示到详情页面上: 这个功能实现起来不难,但是比较墨迹,因为这一个页面中的信息要从三张表中查询:商家信息在seller表,图片在ro ...
html导入错误 wordpress,纯代码为WordPress压缩前端html代码附BUG修复
[摘要] wp-html-compression是WordPress常用的压缩前端代码插件,本文简析纯代码实现WordPress前端代码压缩功能,并指出常见bug的解决方法. 除了主机的因素之外,一个 ...
java 后端验证码逻辑_Java后端产生验证码后台验证功能的实现代码
直接跳severlet在java后台生成验证码: @RequestMapping(value="yzm.action") public void Yzm(HttpSession s ...

收藏功能前端实现代码

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

收藏功能需求

Bootstrap

下面直接贴下代码吧

代码解释

收藏功能前端实现代码相关推荐

最新文章

热门文章