移动端评论点攒功能

移动端评论点攒功能

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

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

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

×××