Question

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

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");
    }
});

因为我已经在页面上包含了代码块，所以我想知道我是否可以克隆我拥有的内容，更改必要的值，然后以这种方式执行，而不是再次使用js中的所有HTML。 / p>

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);

然后遍历guest虚拟机并遍历找到的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);

};

这是小提琴...... https://jsfiddle.net/csv8x6xz/15/

Answer 2

您可以使用jQuery的clone()功能。然后使用

newguest = $('.group-sizing').eq(0).clone(); newguest.find('span','.guest-welcome').html(i);＆lt;＆lt;＆lt;更改克隆元素中的特定元素。

经过jsFiddle测试。

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 class='guest-welcome'>Guest <span>1</span> 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

$("#guestNum").change(function(){

  var count = $(this).val();
  var len = $('.group-sizing').length;
  var newguest;
  var remove = true;
  for(var i = count; i > 0; i--)
  {
    newguest = $('.group-sizing').eq(0).clone();
    newguest.find('span','.guest-welcome').html(i);
    $(this).after(newguest);
    if(remove)
    {
      $('.group-sizing').eq(0).nextAll().remove();
      remove = false;
    }
  }

});

在jQuery中克隆/附加大型HTML块但更改内部变量？

2 个答案: