javascript - 给定新的Firebase响应时，如何更新HTML中的类？

我从下面的进度跟踪线程复制并粘贴了代码。
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实现这一点有三个步骤。
给程序一个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;
   }
});