移动端评论点攒功能
今天我们继续分享一个评论点攒的功能,感觉这个功能逻辑很有意思,整理下来,有需要的伙伴可以一起学习。
功能效果就是这个样子的,下面我们来分解一下代码
<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>
.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;
}
// 点赞
$("#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");
}
});
×××
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。