1

我实际上有一个包含不同操作的下拉菜单，例如：创建任务、编辑任务、删除任务。

我想到的是通过在主要内容 div 上使用 .html() 手动设置表单内容（尽管我在尝试转义双引号时遇到了一些困难）。

就性能而言，这里最好的方法是什么？

  • 使用 html() 手动设置每个案例的 html 内容：例如 html("htmlcode:form and input")
  • 使用 load() 函数从外部文件中获取内容
  • 根据案例隐藏和显示不同的输入（在我的案例中隐藏和显示很多）

谢谢你的帮助

代码 ：

$('#dropdown-choice').click(function()
{
$('#maincontent').html
(
"<form class='form-newproject'>             
<fieldset>
<legend>Change email</legend>                                    
<label>New email</label>  
<input class=\"form-control\" type=\"email\" name=\"newemail\">
<label>Confirm email</label>
<input class=\"form-control\" type=\"email\" name=\"newemailconfirm\">
<label>Password</label>
<input class=\"form-control\" type=\"password\" name=\"passwordcheck\"> 
</fieldset>
</form>"
)
});
4

2 回答 2

1

我认为转义的困难是因为 javascript 不支持多行字符串变量。请参阅在 JavaScript 中创建多行字符串

至于你的问题，你有很多选择。

1.- 正如您所提到的，隐藏和显示是一个不错的选择。只需指定一些带有 ID 的表单并根据需要显示它们。请注意，.form-newproyect 元素应该开始隐藏。所以你的 CSS 可能包含一个.form-newproyect {display:none}规则。

<form id="form1" class="form-newproyect">...</form>
<form id="form2" class="form-newproyect">...</form>
<form id="form3" class="form-newproyect">...</form>

$('#dropdown-choice').click(function(){
  //maybe a case statement
  //suppose you need only #form2:
  jQuery(".form-newproyect").hide(); //hide all other forms
  jQuery("#form2").show(); //display the needed one
}

2.- 第二种方法是使用模板系统。您可以定义一些模板：

<script type="text/template" id="form1Tpl">
  <form id="form1" class="form-newproyect">...</form>
</script>

<script type="text/template" id="form2Tpl">
  <form id="form1" class="form-newproyect">...</form>
</script>

<script type="text/template" id="form2Tpl">
  <form id="form1" class="form-newproyect">...</form>
</script>

我们使用<script type="text/template" id="">所以内容不会被渲染或解释为 javascript，但它的内容仍然可以被 javascript 检索；）

然后你称它为：

$('#dropdown-choice').click(function(){
  //maybe a case statement
  //suppose you need only #form2:
  var formTemplate = jQuery("#form2Tpl").html(); //get the template
  jQuery("#form-container").html(formTemplate); //replace the form-container html
}

我们应该同时测量两者，但我认为第一个性能更好。

至于 load() 方法，这样的远程调用将比其他选项慢。

于 2013-10-17T22:13:34.393 回答
0

1) 为什么你难以逃脱？\" 不适合你吗？

2）手动设置html内容似乎很有效。使用 load() 将需要发送和接收/处理 HTTP 请求，这似乎是最慢的选项。' 的最后一个选项case:似乎也非常有效。

不要忘记这一切是多么的高级。我可能会误解，但如果你担心 100case:或if/else:' 效率低下......不要。:)

于 2013-10-17T21:23:26.363 回答