我需要有关如何将赞与 Firebase 链接并显示实时计数的帮助？我应该如何将此 https://firebase.google.com/docs/database/web/lists-of-data 与 HTML 页面连接？
<!DOCTYPE html>
<html>
<head>
<style>
.like-content {
display: inline-block;
width: 100%;
margin: 40px 0 0;
padding: 40px 0 0;
font-size: 18px;
border-top: 10px dashed #eee;
text-align: center;
}
.like-content span {
color: #9d9da4;
font-family: monospace;
}
.like-content .btn-secondary {
display: block;
margin: 40px auto 0px;
text-align: center;
background: #ed2553;
border-radius: 3px;
box-shadow: 0 10px 20px -8px rgb(240, 75, 113);
padding: 10px 17px;
font-size: 18px;
cursor: pointer;
border: none;
outline: none;
color: #ffffff;
text-decoration: none;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.like-content .btn-secondary:hover {
transform: translateY(-3px);
}
.like-content .btn-secondary .fa {
margin-right: 5px;
}
.animate-like {
animation-name: likeAnimation;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-duration: 0.65s;
}
@keyframes likeAnimation {
0% { transform: scale(30); }
100% { transform: scale(1); }
}
</style>
</head>
<body>
<div class="like-content">
<button class="btn-secondary like-review">
<i class="fa fa-heart" aria-hidden="true"></i> Like
</button>
</div>
</body>
</html>
这是我使用喜欢按钮的"喜欢HTML页面"的基本代码。事件应在单击时发生。提前谢谢。
想象一下数据是这样的：
posts
-post1
-likes
-caption
-id
-photoLink
-post2
-likes
-caption
-id
-photoLink
JS代码看起来像：
var ref = firebase.database().ref('posts');
ref.once('value', function(snapshot) {
snapshot.forEach(function(childSnapshot) {
var childKey = childSnapshot.key; //holds id like posts1,posts2
var childData = childSnapshot.val(); //holds rest of data in object format
displayPosts(childData);
});
});
function displayPosts(childData)
{
var bodyCode='<div class="like-content">
<button class="btn-secondary like-review">
<i class="fa fa-heart" aria-hidden="true">'+childData.likes+'</i> Like
</button>
</div>';
document.getElementById("post-conatainer").appendChild(bodyCode);
}
.HTML：
<!DOCTYPE html>
<html>
<head>
<style>
.like-content {
display: inline-block;
width: 100%;
margin: 40px 0 0;
padding: 40px 0 0;
font-size: 18px;
border-top: 10px dashed #eee;
text-align: center;
}
.like-content span {
color: #9d9da4;
font-family: monospace;
}
.like-content .btn-secondary {
display: block;
margin: 40px auto 0px;
text-align: center;
background: #ed2553;
border-radius: 3px;
box-shadow: 0 10px 20px -8px rgb(240, 75, 113);
padding: 10px 17px;
font-size: 18px;
cursor: pointer;
border: none;
outline: none;
color: #ffffff;
text-decoration: none;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.like-content .btn-secondary:hover {
transform: translateY(-3px);
}
.like-content .btn-secondary .fa {
margin-right: 5px;
}
.animate-like {
animation-name: likeAnimation;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-duration: 0.65s;
}
@keyframes likeAnimation {
0% { transform: scale(30); }
100% { transform: scale(1); }
}
</style>
</head>
<body>
<div id="post-container">
</div>
</body>
</html>