最新消息:欢迎大家来到小月博客

移动端评论点攒功能

web前端 小月 1223浏览 0评论

移动端评论点攒功能

 

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

clike

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

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");
    }
 });

 

下载的dome里面有关于数据提交的源码,用于实际项目。

 

 


转载请注明:小月博客 » 移动端评论点攒功能

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (2)

  1. 看看你的博客,也是一种娱乐!
    增达网6个月前 (06-25)回复
  2. 没事过来学习一下,支持博主。。
    天津网站建设4个月前 (08-11)回复
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册