首页 > 代码库 > 移动端评论点攒功能
移动端评论点攒功能
移动端评论点攒功能
今天我们继续分享一个评论点攒的功能,感觉这个功能逻辑很有意思,整理下来,有需要的伙伴可以一起学习。
功能效果就是这个样子的,下面我们来分解一下代码
html部分
<ul id="comments_list"> <li class="comments"> <div class="com_top"> <span class="photo"> <img src="http://www.mamicode.com/aliyueImg/b20.jpg"> </span> <span class="name">风起</span> </div> <div class="com_content"> 假如我们一路有默契,那时光再长又有什么关系。我喜欢有感觉的文字。写的现实而温暖。带上你的耳机闭上眼睛来静静聆听这篇《就让我们,晚点在一起。然后一辈子。》 </div> <div class="com_bottom"> <span class="time">2017-04-18</span> <span class="useful"> <span class="like_num">1</span>有用 </span> </div> </li> </ul>
css部分
.com_bottom .useful{ float: right; font-size: 10px; padding: 0 15px; text-align: center; line-height: 20px; border-radius: 10px; color: #999999; border: 1px solid #999999; } .com_bottom .useful.usefulClick { color: #F32D27; border: 1px solid #F32D27; }
JS部分
// 点赞 $("#comments_list li.comments .useful").click(function(){ var $likeNum = $(this).find(‘.like_num‘); var num = +$likeNum.text() if(!$(this).hasClass(‘usefulClick‘)){ $(this).addClass(‘usefulClick‘); $likeNum.text(++num); }else{ console.log("tag has usefulClick"); } });
源码下载
本文出自 “小月博客” 博客,请务必保留此出处http://aliyue.blog.51cto.com/11564403/1942418
移动端评论点攒功能
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。