如何根据span标签的文本内容修改其class属性？

可行实现代码 #

HTML 部分

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="f1">x1</span>
<span class="f1">x2</span>
<span class="f1">x3</span>

JavaScript 部分

// 建立文本与目标样式的映射表，方便后续扩展
const classMap = {
  'x1': 'badge bg-label-danger me-1',
  'x2': 'badge bg-label-success me-1'
};

$(".f1").each(function() {
  // 使用text()获取纯文本内容，加上trim()处理可能的空格
  const text = $(this).text().trim();
  if (classMap[text]) {
    $(this).addClass(classMap[text]).removeClass('f1');
  }
});

关键说明 #

• 用text()代替html()：如果span内只有纯文本，text()能更精准获取内容，避免意外的HTML标签干扰判断；trim()可以处理文本前后的空格，防止因空格导致匹配失败。
• 使用映射表classMap：相比于多个else if分支，映射表让新增文本对应的样式更便捷，代码结构更清晰，后期维护成本更低。
• 原代码逻辑本身是有效的，上述优化主要是提升代码的可维护性和鲁棒性。

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