使用jQuery时，如何处理拥有多个类的按钮的class属性值？

嘿，我来帮你搞定这个问题！你遇到的是多类名按钮的类属性处理问题，其实jQuery和原生JS都有很方便的解决办法，分几种场景给你说：

场景1：只是想检查某个类是否存在 #

如果你的需求只是判断按钮有没有某个特定类，那直接用jQuery的hasClass()方法就好，完全不用自己处理字符串，简单又靠谱：

$('button').click(function() {
  const $currentBtn = $(this);
  // 检查是否包含'cc'类
  if ($currentBtn.hasClass('cc')) {
    console.log("这个按钮有'cc'类");
  }
  // 检查是否包含'btn-primary'类
  if ($currentBtn.hasClass('btn-primary')) {
    console.log("这个按钮有'btn-primary'类");
  }
});

场景2：需要获取所有类并处理成数组 #

如果你要拿到所有类名做遍历、筛选这类操作，可以把attr('class')拿到的字符串按空格分割成数组，记得过滤掉可能的空字符串（避免按钮类名首尾有空格的情况）：

$('button').click(function() {
  const classString = $(this).attr('class');
  // 按任意数量的空格分割，再过滤空值
  const classArray = classString.split(/\s+/).filter(cls => cls);
  
  console.log("所有类名数组：", classArray); // 输出 ["cc", "btn", "btn-primary"]
  
  // 遍历数组做你需要的处理
  classArray.forEach(className => {
    console.log("当前类名：", className);
  });
});

场景3：用原生DOM API更灵活地操作类 #

你也可以通过jQuery对象拿到原生按钮元素，然后用原生的classList属性，它是一个DOMTokenList对象，自带contains()、add()、remove()这些实用方法，操作起来非常灵活：

$('button').click(function() {
  const nativeBtn = this; // 直接获取原生DOM元素
  const classList = nativeBtn.classList;
  
  // 检查类是否存在
  console.log("是否包含'cc'类：", classList.contains('cc')); // 输出 true
  
  // 把classList转成数组
  const classArray = Array.from(classList);
  console.log("所有类名数组：", classArray); // 输出 ["cc", "btn", "btn-primary"]
  
  // 还能直接添加/移除类（如果需要的话）
  // classList.add('new-custom-class');
  // classList.remove('btn');
});

根据你的实际需求选对应的方法就好啦～

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