h5、jq 移动端评论点攒功能

平时做的项目中大部分都会涉及到评论的功能，之前用写的项目，功能写起来很方便，但是对于一个单页来说，有点大材小用了，所有今天分享一个关于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-18span><span class="useful"><span class="like_num">1span>有用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");}});

核心代码如上，有需要源码案例的请自行下载吧，有不同写法的可以找我交流！

demo下载请点击 案例演示