实现列表内AJAX无刷新点赞,直接上代码,注意需要jquery.min.js支持!
列表模板里写:
<script type="text/JavaScript"> $(".icon-thumbs-up").click(function(event){ event.preventDefault(); var mythis = $(this); var classid = mythis.data("classid"); var id = mythis.data("id"); $.ajax({ type:"GET", url:"[!--news.url--]e/public/digg/", data:{"classid":classid,"id":id,"dotop":1,"doajax":1,"ajaxarea":"diggnum"}, dataType:"text", success:function(data){ var reinfo = data.split("|"); if (reinfo.length != 1) { if (reinfo[0] != "") { mythis.find("em").html(reinfo[0]); } if (reinfo[2] != "") { //var left = parseInt(mythis.offset().left)+20, top = parseInt(mythis.offset().top); var left = 20, top = mythis.find("em").get(0).offsetHeight; $(".zan").remove(); if (reinfo[2] == "谢谢您的支持") { mythis.append('<div class="zan">+1 谢谢您的支持</div>'); //$("body").append('<div class="zan">+1 谢谢您的支持</div>'); }else{ mythis.append('<div class="zan">已赞</div>'); //$("body").append('<div class="zan">已赞</div>'); } //"text-shadow":"0 1px 0 rgba(0,0,0,0.5)","font-family":"simsun" $(".zan").CSS({"position":"absolute","z-index":"10","left":left+"px","top":-top+"px","color":"inherit","width":"120px","height":"60px","background":"#fff","border-radius":"6px"}).animate({top:-top-30},"slow",function(){$(this).fadeIn("fast").remove();}); } }else{} } }); }); </script>
列表内容模板需要点赞的地方写:
<a href="[!--titleurl--]" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="icon-thumbs-up" data-classid="[!--classid--]" data-id="[!--id--]"><span class="font"><i class="fa fa-heart-o"></i><em>[!--diggtop--]</em>个赞</span></a>