javascript - jQuery、函数 .html 正确语法

Question

不知怎的，我遇到了语法问题。我这里有这段代码

$('#logoutput').html("<div id=\"loginbox\" class=\"boxgrid\">Username: <form action=\"\" method=\"post\"><input class=\"textfieldcss\" type=\"text\" name=\"loginname\" value="+$userip+"\">Password: <form action=\"\" method=\"post\"><input class=\"textfieldcss\" type=\"hidden\" name=\"loginpass\" value="+$userpw+"\"></div>");

如果内容只有:

$('#logoutput').html("<div id=\"loginbox\" class=\"boxgrid\">Username: <form action=\"\" method=\"post\"><input class=\"textfieldcss\" type=\"text\" name=\"loginname\">"

它没有向我显示错误。

这可能是因为我在 jQuery 函数中错误地实现了变量吗？

Answer 1

这不是您问题的真正答案，但它会帮助您减少问题:不要使用这样的字符串。至少使用一个模板。有很多库可以为您做模板，但至少可以做一些类似的事情:

<script type="text/html" id="mooTemplate">
  <div id="loginbox" class="boxgrid">
    Username:
    <form action="" method="post">
    <input class="textfieldcss" type="text" name="loginname" value="{{ userip }}">
    Password:
    <form action="" method="post">
    <input class="textfieldcss" type="hidden" name="loginpass" value="{{ userpw }}">
  </div>
</script>

然后将其交换:

var templateHTML = $("#mooTemplate").text()
                   .replace(/{{ userip }}/, userip)
                   .replace(/{{ userpw }}/, userpw);
$(target).html(templateHTML);

不过，不要自己动手，只需使用网络上提供的众多预制模板解决方案之一即可。我个人喜欢 nunjucks，但还有很多其他的。