嘿，我一眼就揪出你代码里的问题啦！报错的核心原因是第二行的选择器字符串拼接完全混乱，导致JS解析时碰到了意外的语法标记。

先拆解下你的错误点：

• 选择器缺少类选择器的.符号：你要选的是带有modal-body和step-{key}类的元素，必须用.开头标识类选择器，原代码直接写modal-body会被当成标签选择器，这显然不对。
• 引号拼接逻辑错误：原代码$("modal-body step-' + key")里，引号在step-'就提前闭合了，后面的+ key没有被正确纳入字符串拼接逻辑，JS根本看不懂这个写法。

修复后的代码方案 #

我给你两种可靠的写法，任选其一就行：

方案1：用类选择器正确拼接

$('.modal-content').append('<div class="modal-body step-' + key + '" data-step="'+key+'"></div>');
// 修复第二行的选择器和引号拼接
$(".modal-body.step-" + key).append(input);

这里要注意：.modal-body和.step-${key}是连在一起的（中间没有空格），表示同时拥有这两个类的元素，然后用双引号包裹整个选择器字符串，再正确拼接key变量。

方案2：用data属性选择（更不易出错）

既然你给元素加了data-step="'+key+'"属性，直接用这个属性来选择元素会更直观，也不用纠结类名的拼接：

$('.modal-content').append('<div class="modal-body step-' + key + '" data-step="'+key+'"></div>');
// 通过data-step属性定位元素
$('[data-step="' + key + '"]').append(input);

额外小技巧：用ES6模板字符串简化写法 #

如果你的环境支持ES6+，强烈推荐用**反引号（）**包裹的模板字符串，直接用${变量名}`插入变量，彻底告别引号切换和拼接的烦恼：

$('.modal-content').append(`<div class="modal-body step-${key}" data-step="${key}"></div>`);
$(`.modal-body.step-${key}`).append(input);
// 或者用data属性的写法
$(`[data-step="${key}"]`).append(input);

这种写法可读性拉满，再也不会搞混单双引号啦！

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