Question

这是同时添加多个输入字段的最佳方法吗？

function add(){
   counter++;
   if (counter > 10){counter = 10;
   } else {
     document.getElementById("counter").value=counter;
     document.getElementById("addpackage").innerHTML+=
     "<div class='sent-item'><h3>Papildus sūtījums Nr."+counter+"</h3><div class=form-group row'><label for='when' class='col-sm-2 control-label'></label><div class='col-sm-5'><label for='when-today' class='right-pad'>Aizvest šodien</label><input type='radio' name='when["+counter+"]'></div><div class='col-sm-5'><label for='when-notoday' class='right-pad'>Aizvest rīt</label><input type='radio' name='when["+counter+"]'></div></div><div class='form-group row extra-space'><label class='col-sm-2 control-label'>No? <span>*</span></label><div class='col-sm-6'><input type='text' class='textbox_1 form-control' id='from-company' name='from-company["+counter+"]'placeholder='Uzņēmuma nosaukums' style='margin-bottom: 5px;'><input type='text' class='textbox_1 form-control' id='from-address' name='from-address["+counter+"]' placeholder='Adrese' style='margin-bottom: 5px;'><input type='text' class='textbox_1 form-control' id='from-info' name='from-info["+counter+"]' placeholder='Kontaktinfo' ></div><div class='col-sm-4 center'><input id='enable_from' name='enable_from["+counter+"]' type='checkbox' /><label class='form-label col-sm-12'>No mums!</label></div></div>";

   }
}

我想添加的HTML太大了，很难管理它。

Answer 1

嗯，显然你发布的代码不起作用，因为没有循环（我认为是你打算写的）。如果它是一个循环，它会工作。您可以将字符串格式化为更易读，并且可以或多或少地维护。主要问题是在JS内部格式化HTML可能会很混乱。 ES6有template strings可以使这更容易管理。

Mustache.js这样的模板库也可以提供更清晰的代码。请注意，Mustache模板不允许模板内部使用逻辑。因此，为了在计数器后面有一些东西，你必须提供一个ID列表（这将很容易生成）。

例如，您的模板类似于：

<div id="target">Loading...</div>
<script id="template" type="x-tmpl-mustache">
    {{#ids}}
        <div id="div_{{id}}">
            ...
        </div>
    {{/ids}}
</script>

然后使用模板的代码就像：

$(document).ready(function () {
  var template = $('#template').html();
  var data = {ids: [
    {id: 1},
    {id: 2},
    {id: 3}
  ]};
  var rendered = Mustache.render(template, data);
  $('#target').html(rendered);
});

这里的JS比必要的更加冗长，以显示传递不仅仅是计数器的可能性（但你必须通过计数器 - 无法在模板中计算它）。

这将创建包含div_1，div_2等ID的3个div。

JSFiddle

Answer 2

像这样添加

function add(){
   counter++;
   if (counter > 10){counter = 10;
   } else {
     document.getElementById("counter").value=counter;

     var selectItem = $('<div class="'"sent-item"'"></div>');
    $('<h3>Papildus sūtījums Nr."+counter+"</h3>').appendTo(selectItem);
    var row = $('<div class="form-group row">').appendTo(selectItem);
        $('<label for='when' class='col-sm-2 control-label'></label>').appendTo(row);
        var col5_1 = $('<div class='col-sm-5'></div>').appendTo(row);
            $('<label for='when-today' class='right-pad'>Aizvest šodien</label>').appendTo(col5_1);
            $('<input type='radio' name='when["+counter+"]'>').appendTo(col5_1);
        var col5_2 = $('<div class='col-sm-5'></div>').appendTo(row);
            $('<label for='when-notoday' class='right-pad'>Aizvest rīt</label>').appendTo(col5_2);
            $('<input type='radio' name='when["+counter+"]'>').appendTo(col5_2);


     document.getElementById("addpackage").innerHTML+= selectItem;


   }

javascript添加具有唯一名称和ID的多个表单字段

2 个答案: