我从以下进度跟踪器线程中复制并粘贴了代码。 Build Step Progress Bar (css and jquery)
根据我的 Firebase 服务器的更新,我想更新 <li class = "progtrckr-todo":
至<li class = "progtrckr-done":
<ol class="progtrckr" data-progtrckr-steps="3">
<li class="progtrckr-todo">Washing</li>
<li class="progtrckr-todo">Drying</li>
<li class="progtrckr-todo">Ready for Pickup</li>
</ol>
根据 Firebase 数据库的新响应,如何更新 HTML 中的类?
谢谢!
最佳答案
使用 Firebase 可以通过三个步骤实现这一目标。
- 为 progtrckr 提供一个 ID。
- 创建一个 Firebase 监听器来指示进度何时完成。
- 根据快照的值更改元素的样式。
-
// #1
var progtrckr = $('#progtrckr');
// #2
var ref = new Firebase('<your-firebase-db>/status');
ref.on('value', function(snap) {
// #3
var status = snap.val();
// Start with a clean slate of classes
progtrckr.removeClass();
switch (status) {
case "WASHING":
progtrckr.addClass('progtrckr-todo');
break;
case "DRYING":
progtrckr.addClass('progtrckr-something');
break;
case "READY FOR PICKUP":
progtrckr.addClass('progtrckr-done');
break;
}
});
关于javascript - 如何在给定新的 Firebase 响应的情况下更新 HTML 中的类?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32726874/