Js--点击收藏小案例

Js–点击收藏小案例

用Js实现点击收藏效果，且在原有收藏量基础上增减
思路：点击收藏时设置想要的样式以及数量增1
相反 点击取消收藏 将数量减1

废话不多说，干货如下（具体详解在代码处）：
Js 代码实现

var heart = document.getElementsByClassName("icon-xin");
    var span = document.getElementsByClassName("count");
    for(var i = 0 ; i < heart.length ; i++){
        var count;//计数器  总收藏量
        (function(i){
            var flag = true; //点击收藏
            // 点击收藏 【心】 事件
            heart[i].onclick = function(){
                if(flag){ //点击收藏
                    flag = false;
                    // 添加样式
                    this.className = "iconfont icon-xin active";
                    ++span[i].innerHTML;  //点击收藏 在收藏量 基础上 增1
                }else{ //点击取消收藏
                    flag = true;
                    this.className = "iconfont icon-xin";
                    --span[i].innerHTML; //点击取消收藏 在收藏量 基础上 减1
                }    
            }
        })(i); 
    }

CSS：

.icon-xin{
        font-size: 20px;
        color: rgba(0,0,0,0.3);
    }
    .active{
        color: #E1251B;
    }
    .active{
        animation: heart 0.5s linear;
    }
    @keyframes heart{
        from{
            font-size: 20px;
        }
        50%{
            font-size: 18px;
        }
        to{
            font-size: 20px;
        }
    }

Div：

        50
        60
        70
    

效果如下：