点赞 功能

原创 2018年04月17日 11:05:35

最近写了一个仿QQ空间的项目  涉及到说说 就利用前端的JQuery实现了点赞

jsp的代码

<c:if test="${!empty feel }">
			<c:forEach items="${feel}" var="feel" varStatus="status">
				<div class='msgBox'>
					<dl>
						<dt>
							<img src="static/headpic/${feel.uid.headpic }"
								alt="${feel.uid.username }" height="50" width="50">
						</dt>
						<dd>
							${feel.uid.username } <span style="font-size: 7px;">${feel.time }</span>
							<c:if test="${user.id==feel.uid.id }">
								<a style="text-decoration: none"
									href="<%=path %>/deleteFeel?feelid=${feel.id}<%-- &userid=${feel.user.userid }¤tPage=${pager.pageNum } --%>">
									<span style="font-size: 7px;"  onclick="return operaconfirm('删除');">            删除</span>
								</a>
							</c:if>
						</dd>
					</dl>
					<div class='msgTxt'>
						${feel.context }<br><!-- 放图片 -->
<%-- 						<c:if test="${!empty feel.pic}"> --%>
<%-- 							<img src="static/img/${feel.pic }" height="50" width="70"> --%>
<%-- 						</c:if> --%>
					</div>
					<div align="right"  id="${feel.id }">
					</div>
					<script type="text/javascript">
							var zan = "${feel.zan}";
							var zz=zan.split(";");
							var zan='static;img;zan.png';
							var yizan='static;img;yizan.png';
							for(var i=0;i<zz.length-1;i++){
								if(zz[i]=="${user.id}"){ //如果赞的用户里有当前用户 就显示已赞     //当做标识符来用,区分是否已点赞  //鼠标移上去出现小手指  //鼠标移动上去如果为点赞就换换背景图 //鼠标移走如果还没点赞换背景图 //触发点赞 修改数据库赞的用户         //点赞的总人数 数据库放的是1;2;3;     
									$("#"+"${feel.id }").append("<img src='static/img/yizan.png' alt='1' id='${feel.id}' style='cursor:pointer;' onmouseover=\"changeimg1(this);\" onmouseout=\"changeimg2(this);\" onclick=\"zannum(this)\" >(<font class='${feel.id }'>"+(zz.length-1)+"</font>)         <img src='static/img/take.png'>       <img src='static/img/zf.png'>");
									break;
									}
								else{
									if(i==zz.length-2){
										$("#"+"${feel.id }").append("<img src='static/img/zan.png' alt='0' id='${feel.id}'  style='cursor:pointer;' onmouseover=\"changeimg1(this);\" onclick=\"zannum(this)\" onmouseout=\"changeimg2(this);\" >(<font class='${feel.id }'>"+(zz.length-1)+"</font>)         <img src='static/img/take.png'>       <img src='static/img/zf.png'>");
										}
									}
							}
						</script>
				</div>
				<input type="hidden" value="${feel.zan }" name="${feel.id }">//隐藏用来储存zan的用户数据
			</c:forEach>
		</c:if>

script中使用的方法

<script type="text/javascript">
	var za;
	function changeimg1(obj) {
		if(obj.alt=="0"){
			obj.src="static/img/yizan.png";
			}
	}
	function changeimg2(obj) {
		if(obj.alt=="0"){
			obj.src="static/img/zan.png";
			}
	}
	function zannum(obj) {
		if(obj.alt=="0"){
				obj.src="static/img/yizan.png";
				obj.alt=1;
				za=$("input[name='"+obj.id+"']").val()+"${user.id};";
				$("."+obj.id).html($("."+obj.id).html()*1+1);
		}else{
			obj.src="static/img/zan.png";
			obj.alt=0;
			za=($("input[name='"+obj.id+"']").val()).replace("${user.id};","");
			$("."+obj.id).html($("."+obj.id).html()*1-1);
			}
 		$.ajax({
 			type : "POST",
 			contentType : 'application/json',
 			url : 'updatazan',
 			data:JSON.stringify({"zan":za,"id":obj.id}),
 			});
		
	}
	</script>

嗯 本来鼠标移上去和移下来是一个方法 但是后面涉及到一些东西 逻辑太乱 就分开了 


在ASP.NET中实现多文件上传

在ASP.NET中实现多文件上传在以前的Web应用中,上传文件是个很麻烦的事,现在有了.NET,文件上传变得轻而易举。下面的这个例子实现了多文件上传功能。可以动态添加输入表单,上传的文件数量没有限制。...
  • net_lover
  • net_lover
  • 2003-05-26 11:26:00
  • 5982

点赞功能的实现

点赞功能,使用cookie记录文章id,数据库记录点赞总数 前台代码 点赞总数 js代码 script> fun...
  • liyunxia123
  • liyunxia123
  • 2016-05-24 17:47:26
  • 1641

点赞功能设计

点赞功能的设计 每一次点赞,需要记录: (1)谁点的赞; (2)为那篇文章点的赞; (3)点赞时间 (4)是否已经取消点赞   数据表设计 点赞记录表 列名 ...
  • a_dreaming_fish
  • a_dreaming_fish
  • 2016-02-23 08:51:12
  • 2834

第5章 首页数据中加入用户并实现点赞功能

请关注我的小站:http://oideas.herokuapp.com/ 上一章实现了用户的登录和注册功能,当然有些同学可能会发现,这两个功能做的很粗,没错,像前端验证,就没有做email的匹配,后...
  • jov123
  • jov123
  • 2014-02-23 11:28:36
  • 3997

JavaWeb 实现点赞功能

JavaWeb 实现点赞功能今天写了一个点赞功能 主要内容是实现一个用户对同一文章只能点赞一次,第二次就是取消赞思路: 1.首先通过aid和uid遍历点赞表great。 2.若不能够查找到符合的...
  • fordushao
  • fordushao
  • 2017-02-21 23:58:43
  • 3507

Laravel 中点赞功能实现

本文建立于没有用户登录的简单点赞功能,主要使用了Ajax,Redis 配置
  • Lj_550566181
  • Lj_550566181
  • 2017-01-21 13:45:47
  • 969

点赞功能程序设计

不太推荐LS用HASH来存储点赞的数据. 因为没办法进行排序(如果需要的话. 我想一定需要) 目前 我们是这样处理的. 可以使用ZSET有序集合进行存储. 理论上说一个ZSET中, 10W...
  • flamezyg
  • flamezyg
  • 2015-02-28 14:51:03
  • 4191

jquery ajax之点赞功能的实现

之前,一直想用一下ajax的技术到项目中,看他到底好处在哪里,为什么会被这么多人所推崇。 还记得之前也是看过jquery,但是现在回过来想想,其实能够记起来的东西很少,只有将知识应用起来,可能才会记忆...
  • huangqing510
  • huangqing510
  • 2015-08-25 15:10:42
  • 4466

一个“点赞”功能的实现代码

“点赞”是最近很流行的一个词,自己也琢磨了一下代码,暂时只实现了功能性代码,要添加漂亮效果,可以继续用Jquery来实现。看效果请点击:http://www.i5wl.com/example/prai...
  • jasonijessy
  • jasonijessy
  • 2014-03-29 22:06:16
  • 10669

thinkphp 点赞

控制器代码
  • u011816231
  • u011816231
  • 2016-07-06 18:09:42
  • 14476
收藏助手
不良信息举报
您举报文章:点赞 功能
举报原因:
原因补充:

(最多只允许输入30个字)