h五、jq 移動端評論點攢功能

h五、jq 移動端評論點攢功能

平時作的項目中大部分都會涉及到評論的功能，以前用angular寫的項目，功能寫起來很方便，可是對於一個單頁來講，angular有點大材小用了，全部今天分享一個關於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-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");
    }
 });

核心代碼如上，有須要源碼案例的請自行下載吧，有不一樣寫法的能夠找我交流！

 

 demo下載請點擊               案例演示