点赞 功能

最近写了一个仿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;"  οnclick="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;' οnmοuseοver=\"changeimg1(this);\" οnmοuseοut=\"changeimg2(this);\" οnclick=\"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;' οnmοuseοver=\"changeimg1(this);\" οnclick=\"zannum(this)\" οnmοuseοut=\"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>

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