javascript - 在 jQuery 中克隆/追加大型 HTML block 但更改内部变量？

Question

我有一个大型 HTML block ，需要根据选择框值进行克隆和追加。它按原样工作，但我想知道是否可以使用克隆并动态更改某些内容，而不是使用实际的 HTML block 。

HTML:

<select id="guestNum">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>
<div class="group-sizing">
    <div class='form-group row border'>
        <div class='inner'>
            <h3>Guest 1 Welcome</h3>
            <div class='select'>
                <select class='form-control' id='guest1'>
                    <option value='New' selected>New</option>
                    <option value='Existing'>Existing</option>
                </select>
            </div>
        </div>
        <div class='inner'>
            <h3>Date</h3>
            <div class='date'>
                <div class='inner'>
                    <p>April 1</p>
                    <p>No Guests</p>
                </div>
            </div>
        </div>
    </div>
</div>

JS:

var comDate = $("<div class='inner'>\
                    <p>April 1</p>\
                    <p>No Guests</p>\
                </div>\
                <div class='inner'>\
                    <p>April 2</p>\
                    <p>Guests Welcome</p>\
                </div>");
$("#guestNum").change(function(){
    var count = $(this).val();
    $(".group-sizing .form-group:gt("+(count-1)+")").remove();
    for (var i = $(".group-sizing .form-group").length; i < count; i++){
        $("<div class='form-group row border'>\
        <div class='inner'>\
            <h3>Guest " + (i+1) + " Welcome</h3>\
            <div class='select'>\
                <select class='form-control' id='guest" + (i+1) + "'>\
                    <option value='New' selected>New</option>\
                    <option value='Existing'>Existing</option>\
                </select>\
            </div>\
        </div>\
        <div class='inner'>\
            <h3>Date</h3>\
            <div class='date'>" + comDate + "</div>\
        </div>\
    </div>").appendTo(".group-sizing");
    }
});

由于我已经在页面上包含了代码块，所以我想知道是否可以克隆我所拥有的代码，更改必要的值，然后这样做，而不是再次将所有 HTML 包含在 js 中。

Here's a fiddle

Answer 1

我知道这可能不完全是您想要的，但这里有一个示例，说明如何克隆 html 并在其中插入变量。

希望这能引导您走向正确的方向。

这也可能是一个页面，为了简单起见，我只是将其设置为不显示。

<div id="template" style="display:none;">
  <div class="group-sizing">
    <div class="form-group row border">
      <div class="inner">
        <h3>Guest {{id}} Welcome</h3>
        <div class="select">
          <select class="form-control" id="guest1">
            <option value="New" selected>New</option>
            <option value="Existing">Existing</option>
          </select>
        </div>
      </div>
      <div class="inner">
        <h3>Date</h3>
        <div class="date">
          <div class="inner">
            <p>{{date}}</p>
            <p>No Guests</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

然后创建一个 JS 函数来抓取 {{}}

的 html

function findHandleBars(html) {
  var results = [], re = /{{([^}]+)}}/g, text;

  while(text = re.exec(html)) {
    results.push(text[1]);
  }

  return results;

}

我创建了一个简单的“ guest ”数组

var guests = [
   {
      "id": "1",
      "date": "April 1"
   },
   {
      "id": "2",
      "date": "April 2"
   },
   {
      "id": "3",
      "date": "April 3"
   }
];

定义

var template = $('#template').prop('innerHTML');

调用findHandleBars方法并将数组设置为变量

var results = findHandleBars(template);

然后循环遍历客人并循环遍历找到的handleBars并替换为变量

for(i=0; i< guests.length; i++){

var n = template;

for(i=0; i< guests.length; i++){
  var n = template;

  for(b=0; b<results.length; b++){
    var n = n.replace('{{'+results[b]+'}}', guests[i][results[b]]);
  }

  $('#body').append(n);

};

这是 fiddle ... https://jsfiddle.net/csv8x6xz/15/