如何在Firebase中保存同一JS代码的多个实例实现独立点赞计数

你的问题核心是所有点赞容器的id完全相同（都是"Like Count"），导致JavaScript获取到的cId值一致，最终所有按钮都指向Firebase里同一个数据节点，所以点赞数会同步变化。

修复步骤 #

1. 给每个点赞容器分配唯一ID
   HTML中每个.CountLike的id必须唯一，建议用和商品对应的标识（比如商品ID），比如item-like-1、item-like-2。
2. 保持JavaScript逻辑不变
   你的JS逻辑本身是正确的，只要每个容器id唯一，就能自动对应Firebase的不同子节点，实现独立计数。

修改后的HTML

<div>
  <div class="store-action">
    <div class="CountLike" id="item-like-1">
      <div class="likes">
        <span class="counterStat">0</span>
        <button class="btn"><img src="https://www.svgrepo.com/show/164008/heart.svg" class="heart" alt="点赞按钮"></button>
      </div>
    </div>
  </div>
</div>
<div>
  <div class="store-action">
    <div class="CountLike" id="item-like-2">
      <div class="likes">
        <span class="counterStat">0</span>
        <button class="btn"><img src="https://www.svgrepo.com/show/164008/heart.svg" class="heart" alt="点赞按钮"></button>
      </div>
    </div>
  </div>
</div>

原JavaScript代码可直接复用

var dCounters = document.querySelectorAll('.CountLike');
[].forEach.call(dCounters, function(dCounter) {
  var el = dCounter.querySelector('button');
  var cId = dCounter.id;
  var dDatabase = firebase.database().ref('Like Number Counter').child(cId);

  // 获取Firebase数据并更新显示
  dDatabase.on('value', function(snap) {
    var data = snap.val() || 0;
    dCounter.querySelector('span').innerHTML = data;
  });

  // 点击按钮时更新Firebase数据
  el.addEventListener('click', function() {
    dDatabase.transaction(function(dCount) {
      return (dCount || 0) + 1;
    });
  });
});

CSS代码无需修改

.CountLike div {
  display: inline-flex;
}

.item-like {
  font-size: 18px;
  display: inline-block;
  margin-top: 10px;
}

.counterStat {
  margin-right: 15px;
  margin-top: 5px;
}

.heart {
  width: 32px;
  height: 32px;
}

.btn {
  background: none;
  border: none;
  cursor: pointer;
}

效果说明 #

修改后，Firebase的Like Number Counter节点下会生成两个独立子节点：item-like-1和item-like-2，分别存储对应商品的点赞数，点击不同按钮只会更新对应节点的数据，各计数器显示完全独立。

内容的提问来源于stack exchange，提问作者Athreya C