移动端评论点攒功能


今天我们继续分享一个评论点攒的功能,感觉这个功能逻辑很有意思,整理下来,有需要的伙伴可以一起学习。

功能效果就是这个样子的,下面我们来分解一下代码

html部分

<ulid="comments_list"><liclass="comments"><divclass="com_top"><spanclass="photo"><imgsrc="aliyueImg/b20.jpg"></span><spanclass="name">风起</span></div><divclass="com_content">假如我们一路有默契,那时光再长又有什么关系。我喜欢有感觉的文字。写的现实而温暖。带上你的耳机闭上眼睛来静静聆听这篇《就让我们,晚点在一起。然后一辈子。》</div><divclass="com_bottom"><spanclass="time">2017-04-18</span><spanclass="useful"><spanclass="like_num">1</span>有用</span></div></li></ul>css部分

.com_bottom.useful{float:right;font-size:10px;padding:015px;text-align:center;line-height:20px;border-radius:10px;color:#999999;border:1pxsolid#999999;}.com_bottom.useful.usefulClick{color:#F32D27;border:1pxsolid#F32D27;}JS部分

//点赞$("#comments_listli.comments.useful").click(function(){var$likeNum=$(this).find('.like_num');varnum=+$likeNum.text()if(!$(this).hasClass('usefulClick')){$(this).addClass('usefulClick');$likeNum.text(++num);}else{console.log("taghasusefulClick");}});

×××