如何用jQuery将数组值以空格分隔作为div的类名？

嗨，我来帮你搞定这个问题！你遇到的核心问题是JavaScript里直接拼接数组会自动转成逗号分隔的字符串，而且你误用了PHP的str_replace函数（这在JS里根本不起作用哦）。

问题分析 #

你的原代码里，addClass("item "+selectedTags,function(){})这一行有两个明显问题：

• 当你把数组selectedTags和字符串拼接时，JS会默认调用数组的toString()方法，自动把数组转成逗号分隔的字符串，所以最终类名会变成item 23,54,77，完全不符合你要空格分隔的需求。
• addClass的第二个参数是回调函数，但这里你不需要这个多余的回调，反而会导致语法逻辑出错。

解决方法 #

用JavaScript数组的join(' ')方法就可以完美解决！它能把数组里的所有元素用你指定的分隔符（这里是空格）连接成一个完整的字符串，刚好适配类名的空格分隔规则。

修改后的完整代码 #

var selectedTags = []; // 用[]创建数组比new Array()更简洁直观
$("input[name=tags]:checked").each(function() {
    selectedTags.push(this.value);
});
// 用join(' ')把数组转成空格分隔的字符串，再拼接到类名里
$("#step_box").removeClass().addClass("item " + selectedTags.join(' '));

效果说明 #

举个例子，如果selectedTags数组是["23","54","77"]，selectedTags.join(' ')会返回字符串"23 54 77"，最终addClass会把元素的类名设置为item 23 54 77，完全符合你的预期。

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