gpt4 book ai didi

javascript - 如何使用 firebase 数据填充 Accordion ?

转载 作者:行者123 更新时间:2023-12-01 00:20:39 26 4
gpt4 key购买 nike

我正在设计一个网页,该网页将从我的 Firestore 集合中获取数据,并显示每个文档及其相应的字段,并使用 Firebase 中的数据填充我的 Accordion ,但没有显示任何内容

  const db = firebase.firestore();
db.settings({ timestampsInSnapshots: true });


window.onload = function () {

var storageName = localStorage.getItem("storageName");
console.log(storageName);

db.collection(`${storageName}`).get().then((snapshot) => {

// $("#heading").html(""); // This will empty your heading
// $("#forward").html(""); // This will empty your station box
var n = 0;

snapshot.forEach(function (child) {
var name_loc = child.id;
var forward = child.data().ForwardPower;
var reflected = child.data().Reflectedpower;
var ups = child.data().UPSError;
var upsDesc = child.data().UPSDesc;
var trans = child.data().TransmitterError;
var transDesc = child.data().TransDesc;

$("#acc").append(`
<article>
<h1 data-accordion-element-trigger >`+ child.id +`</h1>
<div data-accordion-element-content class="content" data-parent="#acc">
<p> Forward Power: `+ child.data().ForwardPower +`</p>
<p> Reflected Power: `+ child.data().Reflectedpower +`</p>
</div>
</article>
`);
n += 1;

})

})
}

</script>



</head>
<body>
<!-- partial:index.partial.html -->
<section id="acc" class="card">
<article id="accordion">
<h1 data-accordion-element-trigger id="heading"></h1>
<div data-accordion-element-content class="content">
<p id="forward"></p>
</div>
</article>
</section>

运行代码时, Accordion 显示如下。我看不到文档字段,单击任何按钮都没有效果
图片:accordion image

最佳答案

在脚本之前添加 jquery 库

<script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>

关于javascript - 如何使用 firebase 数据填充 Accordion ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59455847/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com