移動端評論點攢功能
阿新 • • 發佈:2017-06-27
點攢
移動端評論點攢功能
今天我們繼續分享一個評論點攢的功能,感覺這個功能邏輯很有意思,整理下來,有需要的夥伴可以一起學習。
功能效果就是這個樣子的,下面我們來分解一下代碼
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"); } });
源碼下載
本文出自 “小月博客” 博客,請務必保留此出處http://aliyue.blog.51cto.com/11564403/1942418
移動端評論點攢功能