如何用JavaScript获取不同结账步骤中active状态<li>的类名

嘿，这事儿好办！针对你给出的结账步骤HTML结构，我给你两种常用的实现方式——原生JavaScript和jQuery，按需选用就行：

原生JavaScript实现 #

这种方式不需要依赖任何库，直接用浏览器原生API就能搞定：

// 确保DOM加载完成后再执行代码，避免找不到元素
document.addEventListener('DOMContentLoaded', function() {
  // 定位到.checkout-bar下带有active类的<li>
  const activeStepLi = document.querySelector('.checkout-bar li.active');
  
  // 先判断元素是否存在（防止页面还没渲染完或者没有active状态的元素时报错）
  if (activeStepLi) {
    // 获取所有类名，classList返回的是DOMTokenList，可直接遍历；转成数组更方便处理
    const activeClasses = Array.from(activeStepLi.classList);
    
    // 打印结果，比如步骤1会得到 ["active", "first"]，步骤2得到 ["active"]
    console.log('当前激活步骤的类名：', activeClasses);
    
    // 如果只需要判断是否包含某个类名（比如first/last），可以用contains方法
    if (activeStepLi.classList.contains('first')) {
      console.log('当前是第一个结账步骤');
    }
  }
});

jQuery实现（如果你的项目已经引入了jQuery） #

如果项目里用了jQuery，代码会更简洁：

$(document).ready(function() {
  // 找到激活状态的<li>
  const $activeStepLi = $('.checkout-bar li.active');
  
  if ($activeStepLi.length > 0) {
    // 获取类名字符串（空格分隔），再转成数组
    const activeClassesStr = $activeStepLi.attr('class');
    const activeClassesArray = activeClassesStr.split(' ');
    
    console.log('当前激活步骤的类名：', activeClassesArray);
    
    // jQuery也有判断类名的方法
    if ($activeStepLi.hasClass('last')) {
      console.log('当前是最后一个结账步骤');
    }
  }
});

小提示 #

• 两种方法都先做了元素存在性判断，避免页面加载过程中或者异常情况下出现Cannot read properties of null的报错
• classList是ES6之后的API，兼容性很好，现代浏览器都支持；如果要兼容极老浏览器，可以用activeStepLi.className获取类名字符串再拆分

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