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].inne