如何使用jQuery为循环生成的按钮添加多个类？

你这是字符串拼接时把class属性的格式搞乱了，原代码错误地加了逗号，还没把两个类名放在同一对引号里，导致HTML解析出错，才出现类名跑到引号外的情况。

两种修复方法： #

1. 修正字符串拼接逻辑

确保两个类名用空格分隔，并且被class属性的同一对引号包裹，去掉多余的逗号：

// 传统字符串拼接写法
$(".playerLetters").append(
    "<button class=\"" + wordArray[i] + " letter\"> " + wordArray[i] + "  </button>"
);

// ES6模板字符串（更简洁易读）
$(".playerLetters").append(
    `<button class="${wordArray[i]} letter"> ${wordArray[i]} </button>`
);

2. 用jQuery创建元素（更推荐）

这种方式无需拼接HTML字符串，直接通过配置对象设置属性，彻底避免格式错误：

// 分步写法
const $btn = $("<button>")
  .addClass(`${wordArray[i]} letter`)
  .text(wordArray[i]);
$(".playerLetters").append($btn);

// 紧凑写法
$("<button>", {
  class: `${wordArray[i]} letter`,
  text: wordArray[i]
}).appendTo(".playerLetters");

原代码错误原因 #

你原来的代码中class= " + wordArray[i] + ", letter会拼接成类似class= u, letter的结构，HTML解析时会把u,当成第一个类名，letter则被识别成一个独立的空属性（也就是你看到的letter=""），自然无法作为类名生效。只要把逗号换成空格，让两个类名都处于class属性的引号内部，问题就解决了。

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