原本程式的部分打算到上一篇就結束了，
不過有小夥伴問到如何在更改狀態的同時<span>中的數字也跟著改變。
所以我們這篇來說如何動態更改<span>中的數字。
首先，我們先來整理有哪些時候會產生(更改)未完成餐點的數字

1. 建立訂單的時候 undo_order()
2. 修改餐點狀態的時候 $('#undo_list').on("change", 'input[name="item_checkbox"]')

動態修改未完成餐點數量

1. 打開 Proprietor.cshtml
2. 給<span>一個id

<span class="badge bg-danger rounded-pill text-white " id="${uid}_span">${count}</span>

這樣方便之後搜尋使用
3. undo_order()中加入以下程式碼

//取得未完成數量
var undo_count = bodys.filter(item => !item.itemDone).length
        //更變數字
        $(`#${uid}_span`).text(undo_count)
        //如果數字為0變成綠色 其餘都是紅色
        if (undo_count == 0) {
            $(`#${uid}_span`).removeClass("bg-danger")
            $(`#${uid}_span`).addClass("bg-success")

        } else {
            $(`#${uid}_span`).removeClass("bg-success")
            $(`#${uid}_span`).addClass("bg-danger")
        }

undo_order()完整程式碼:

function undo_order(head, bodys) {
        var formNum = head.formnum
        var count = bodys.length
        var uid = head.uid
        var html_text = `
<li id="${uid}_li" class="list-group-item  justify-content-between align-items-center list-group-item-success">
    <table id="${uid}_table" class="table table-borderless list-group-item-success">
        <thead>
            <tr>
                <th>
                    訂單編號 ${formNum}
                    <span class="badge bg-danger rounded-pill text-white " id="${uid}_span">${count}</span>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <div class="list-group item_list">

                    </div>
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>
                    <button id="${uid}_btn" name="done_btn" type="button" class="btn btn-success">
                        完成
                    </button>
                </td>
            </tr>
        </tfoot>
    </table>
</li>
`
        $('#undo_list').append(html_text)
        var undo_count = bodys.filter(item => !item.itemDone).length
        $(`#${uid}_span`).text(undo_count)
        if (undo_count == 0) {
            $(`#${uid}_span`).removeClass("bg-danger")
            $(`#${uid}_span`).addClass("bg-success")

        } else {
            $(`#${uid}_span`).removeClass("bg-success")
            $(`#${uid}_span`).addClass("bg-danger")
        }
        bodys.forEach((item) => {
            var item_html = undo_order_item(head.uid,item.uid,item.item, item.count)
            var selector = `#${uid}_table>tbody>tr>td>div`

            $(selector).append(item_html)
            cb_id = `cb_${head.uid}_${item.uid}`
            $(`#${cb_id}`).prop('checked', item.itemDone)
        }
        )

    }

4. 修改 餐點旁checkbox中onchange事件
   加入以下程式碼:

//變色
        var undo_count = selectOrder.bodys.filter(item => !item.itemDone).length
        $(`#${h_uid}_span`).text(undo_count)
        if (undo_count == 0) {
            $(`#${h_uid}_span`).removeClass("bg-danger")
            $(`#${h_uid}_span`).addClass("bg-success")

        } else {
            $(`#${h_uid}_span`).removeClass("bg-success")
            $(`#${h_uid}_span`).addClass("bg-danger")
        }

完整checkbox事件

$('#undo_list').on("change", 'input[name="item_checkbox"]', function () {
        var h_uid = $(this).attr("id").split("_")[1]
        var b_uid = $(this).attr("id").split("_")[2]
        var undo_data = JSON.parse(localStorage.getItem("undo_data"))
        var selectOrder = undo_data.find(order => order.head.uid == h_uid)
        var selectItem = selectOrder.bodys.find(item => item.uid == b_uid)
        selectItem.itemDone = $(this).prop('checked')
        //變色
        var undo_count = selectOrder.bodys.filter(item => !item.itemDone).length
        $(`#${h_uid}_span`).text(undo_count)
        if (undo_count == 0) {
            $(`#${h_uid}_span`).removeClass("bg-danger")
            $(`#${h_uid}_span`).addClass("bg-success")

        } else {
            $(`#${h_uid}_span`).removeClass("bg-success")
            $(`#${h_uid}_span`).addClass("bg-danger")
        }
        
        localStorage.setItem("undo_data", JSON.stringify(undo_data))

    });

5. 成果
   

結語

還差一些驗證的問題外，程式的部分差不多到這邊就結束了。
剩下的就是一些美工、架站的問題了。
在之後還有時間的話，會再把後續的處理再補上。