首先简单介绍一下这个小案例的要求:这是一个点赞的功能。用户单击点赞,该点赞按钮由彩色变成灰色,并且被单击的点赞按钮被替换成已采纳的标识。且其他地方的点赞按钮变成灰色,并禁止被点击。
分析一下这个案例:回答列表会很多。点赞按钮肯定也会有很多个。虽然可以通过jquery的隐士迭代来给被点击的对象加上点击事件,来达到这个效果。但是如果数据了特别大,就会影响到代码的性能。因为jquery会在后面不停的循环这些元素。这个时候我们就可以利用事件冒泡的特点,来解决这个问题。即“事件委托”
我们的解决方案是不给具体的采纳按钮增加click()方法。而是给最外面的document来使用点击事件。这样就避免了jquery不段的在内部循环查找被单击的对象了。
(document).on(‘click’,’.caina_span’,function(e){
var block=(‘.zan’).css(‘display’);
if(
.trim(block)==′block′)returnfalse;varpositionY=e.pageY;varpositionX=e.pageX;
(‘.zan’).css({“top”:+(positionY-50)+”px”,”left”:+(positionX-100)+”px”,”display”:”block”});
(‘.cainaspan′).removeClass(‘clicked′);
(this).hide();
})
解释一下这个代码:
通过给祖先元素document增加单击事件。jquery会把单击对象跟on的第二个参数做比较。如果是true则执行操作