javascript - 使用变量作为属性但带有空格？

Question

假设我有一个具有 name 属性的对象，例如:“Woodcutters Hut”。如果我尝试将其分配给按钮属性:

$('#possible_constructions').append("<button name=" + object.name + ">" + object.name + "</button>")

按钮的书写正确的是整个“Woodcutters Hut”，但名称属性仅包含第一个单词“Woodcutters”。小屋在外面显示如下:

<button name="Woodcutters" hut>Woodcutters Hut</button>

无论如何要确保正确分配属性吗？

Answer 1

让 jQuery 为您处理名称值。不要构建字符串。

$("<button></button>", { 
    name: object.name, 
    text: object.name
}).appendTo("#possible_constructions");

但值得注意的是，“Woodcutters Hut”并不是一个合适的名称。您不应在名称值中使用空格。您应该考虑将该值 reshape 为更合适的值 - 也许通过用下划线替换非字母数字字符:

object.name.replace(/[^\w]/g, "_");

这会将“Woodcutters Hut”转换为“Woodcutters_Hut”。