如何在给定新的Firebase响应的情况下更新HTML中的类

How to Update a Class in HTML given a new Firebase response?

本文关键字：更新 情况下 HTML 响应 Firebase      更新时间：2023-09-26

我从以下Progress Tracker线程复制并粘贴了代码。构建步骤进度条(css和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>

我如何更新类在HTML给出一个新的响应从我的Firebase数据库?

谢谢!

使用Firebase可以通过三个步骤实现。

  1. 给程序员一个id。
  2. 创建一个Firebase侦听器，指示何时完成进度。
  3. 根据快照的值改变元素的样式。

// #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;
   }
});
相关文章：