有朋友问我美丽说的“我喜欢”功能功能是如何实现的,当用户看到自己喜欢的图片或文章时,点击“红心”按钮,能够记录点击数。
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);
});
});
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791