如何动态设置类名并保留样式？局部视图状态切换样式丢失问询

嘿，我来帮你梳理下这个状态样式保留的问题～

首先得明确你的核心需求：当状态从Kitchen切换到In-transit时，你希望Kitchen的样式依然保留（相当于状态是递进式的，历史状态的样式不丢失），对吧？针对这个需求，有两种比较靠谱的解决方案，我分别给你拆解下：

方案一：后端控制状态历史（推荐） #

如果你的业务逻辑允许，最稳妥的方式是在后端传递局部视图数据时，不要只传当前状态，而是传递所有已经触发过的状态集合（比如一个数组或List）。这样每次局部视图刷新时，就能基于历史状态批量渲染样式，而不是只处理当前状态。

举个示例（假设用Razor语法，其他模板引擎逻辑类似）：

<!-- 假设后端传递了一个名为`completedStates`的集合，包含已完成的状态 -->
<div class="status-bar">
  <div class="status-item @(completedStates.Contains("Kitchen") ? "active-style" : "")">
    Kitchen
  </div>
  <div class="status-item @(completedStates.Contains("In-transit") ? "active-style" : "")">
    In-transit
  </div>
  <!-- 其他状态项 -->
</div>

这种方式的优势是逻辑完全由后端把控，前端只负责渲染，不会出现前端选择器匹配错误的问题，维护起来也更清晰。

方案二：前端JS保存状态（适合后端不好修改的场景） #

如果暂时没法调整后端逻辑，那可以用jQuery（或原生JS）在局部视图刷新前后，手动保存并恢复已激活的样式。

步骤1：给状态项加唯一标识 #

先给每个状态元素加一个data-status属性，避免用文本匹配时出现误判：

<div class="status-item" data-status="Kitchen">Kitchen</div>
<div class="status-item" data-status="In-transit">In-transit</div>

步骤2：刷新前保存已激活的状态 #

在调用局部视图刷新的代码前，先记录下已经有样式的状态：

// 保存当前已激活的状态列表
const activeStatuses = [];
$('.status-item.active-style').each(function() {
  activeStatuses.push($(this).data('status'));
});

步骤3：刷新后恢复样式并添加当前状态样式 #

局部视图加载完成后，把之前保存的状态样式重新加上，再给当前状态添加上样式：

// 假设你的局部视图容器ID是status-container，刷新接口是/your-partial-url
$('#status-container').load('/your-partial-url', function() {
  // 恢复历史状态的样式
  activeStatuses.forEach(status => {
    $(`.status-item[data-status="${status}"]`).addClass('active-style');
  });
  // 给当前状态添加样式（这里的currentState是你当前的状态变量）
  $(`.status-item[data-status="${currentState}"]`).addClass('active-style');
});

避坑提醒 #

• 不要直接用:contains()选择器匹配状态文本，万一有状态文本重复（比如多个状态包含"Kitchen"关键词），会导致样式加错；
• 如果你的局部视图是通过AJAX完全替换容器内容，一定要在刷新前保存状态，因为刷新后原来的DOM元素会被移除，之前的样式记录也会丢失。

内容的提问来源于stack exchange，提问作者GThree