欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

jQuery实现点赞功能及再次点击取消功能

程序员文章站 2022-07-02 23:20:57
...

效果:
jQuery实现点赞功能及再次点击取消功能

实现代码

//点赞功能(因为点赞模块是动态创建的所以要用到事件委托)
        $('body').delegate('.click_praise', 'click', function () {
            $(this).parent().html('1').css({color: 'red'}).prepend('<em class="click_praise red"></em>');
            //赞de动画,animate不支持transform所以得换种写法
            $('.red').animate({},0,function(){
                $(this).css({'transform':'rotate(-10deg)'})
            });
            setTimeout(()=>{
                $('.red').animate({},0,function(){
                    $(this).css({'transform':'rotate(0deg)'})
                });
            },200);
            //再次点击赞取消(相当于当再次点击时,生成另一个span,点击事件添加在新生成的em标签上)
            $('.red').on('click',function () {
                $(this).parent().html('赞').css({color: '#cccccc'}).prepend('<em class="click_praise"></em>');
            })
        })

实现思路:把click事件委托给body,在点击赞图标时触发,直接将它的父级span标签的innrtHTMl换成1这是点赞的图标放在em中,所以会消失,于是再生成一个em标签,背景是点亮了的赞的图标,然后给一个动画效果,让它下逆时针旋转10°,2毫秒后变回。 取消赞是在新生成的em标签上添加cilck事件,点击后相当于创建一个新的span标签,跟每点击前的一样,这样就实现了。

实现方法有多种,我这种是自己写的,比较笨拙,感觉相当笨拙,大有待改进,如果大家正在做这种功能,或者有更好的方法,期待发出来大家一起讨论

相关标签: 大前端