h5、jq 移动端评论点攒功能
平时做的项目中大部分都会涉及到评论的功能，之前用angular写的项目，功能写起来很方便，但是对于一个单页来说，angular有点大材小用了，所有今天分享一个关于jq制作评论点赞的移动端展示功能。
效果如下图：
关于效果就是上图所示，现在分析一下代码的部分吧！
html部分
<ul id="comments_list">
<li class="comments">
<div class="com_top">
<span class="photo">
<img src="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");
}
});
核心代码如上，有需要源码案例的请自行下载吧，有不同写法的可以找我交流！