jQuery点“喜欢”功能

有朋友问我美丽说的“我喜欢”功能功能是如何实现的，当用户看到自己喜欢的图片或文章时，点击“红心”按钮，能够记录点击数。

分类：其它特效 > Ajax 难易：入门级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

HTML

首先我们在示例中放三件商品，并且在商品的左上角放上一颗红心，用于点击我喜欢功能。

<ul class="list clearfix"> 
   <li>
       <img alt="纯棉嘴唇珠片T恤短裙套装" src="http://imgtest-dl.meiliworks.com/pic/_o/7c/c4/84c7b57b893cf92c915f763deeb5_640_900.ch.jpg_947bdc66_s1_q0_150_5_0_226_800.jpg" /> 
       <p> <a class="likes" title="我喜欢" href="#">2100</a> </p> 
   </li> 
   <li> 
         <img alt="【成名夜】九分休闲裤" src="http://d05.res.meilishuo.net/pic/_o/ad/19/0f3def1ca6a115537dccb180a3a9_640_832.cf.jpg_2ab460b9_s1_q0_150_5_0_226_800.jpg" /> 
         <p> <a class="likes" title="我喜欢" href="#">716</a> </p> 
   </li> 
    ...
</ul>

jQuery

当用户点击自己喜欢的图片上的红心按钮时，更新原有的数值。

$(function() {
    $(".likes").click(function() {
        var obj = $(this);
        obj.fadeOut(300);
        //以下通过ajax成功返回，这里ajax不作代码演示
        var num = parseInt(obj.text());
        obj.text(num + 1).fadeIn(300);
    });
});