如何动态设置类名并保留其值？

Question

我创建了部分视图，每20秒调用一次，直到满足条件。此视图包含状态栏，并根据条件更改状态。

代码：

<ol class="progress-tracker" data-progress-tracker-steps="4">
    <li class="progress-tracker-initial">Received</li>
    <li class="@(Model.JobStatus == (DeliveryRequestStatus) DeliveryManagerCallback.OrderStatus.Kitchen ? "progress-tracker-done" : "progress-tracker-todo")">Kitchen</li>
    <li class="@(Model.JobStatus == (DeliveryRequestStatus) DeliveryManagerCallback.OrderStatus.Road ? "progress-tracker-done" : "progress-tracker-todo")">In Transit</li>
    <li class="@(Model.JobStatus == (DeliveryRequestStatus) DeliveryManagerCallback.OrderStatus.Delivered ? "progress-tracker-done" : "progress-tracker-todo")">Delivered</li>
</ol>

UI：

我遇到的问题是，当状态变为In-transit from Kitchen时，我正在失去根据我的条件预期的厨房风格。当状态发生变化时，如何保留样式？

• 我应该使用一些覆盖已定义类的条件吗？
• 我是否需要添加jQuery代码来更新类？

如果需要，我可以添加CSS代码。

实际结果：

预期结果：

Answer 1

问题是Model.JobStatus只有一个值，因此您无法检查多个OrderStatus的相等性。在这里，您需要序列比较来解决问题。

所以，如果您有OrderStatus枚举

，请说出来

enum OrderStatus
{
   Received= 1,
   Kitchen = 2,
   Road = 3,
   Delivered = 4
}

并且你的JobStatus属性具有该枚举的值，你可以做这样的事情来达到你想要的效果。

<ol class="progress-tracker" data-progress-tracker-steps="4">
    <li class="progress-tracker-initial">Received</li>
    <li class="@((int)Model.JobStatus >= (int) DeliveryManagerCallback.OrderStatus.Kitchen ? "progress-tracker-done" : "progress-tracker-todo")">Kitchen</li>
    <li class="@((int)Model.JobStatus >= (int) DeliveryManagerCallback.OrderStatus.Road ? "progress-tracker-done" : "progress-tracker-todo")">In Transit</li>
    <li class="@((int)Model.JobStatus >= (int) DeliveryManagerCallback.OrderStatus.Delivered ? "progress-tracker-done" : "progress-tracker-todo")">Delivered</li>
</ol>